ngrx - Angular 2 Set Default Form Control Value Presentation Component -

i bit lost here. have angular 2 app built store architecture (ngrx) , using smart , presentation components.

everything working in relation store , retrieving data, stuck when comes setting default form control value in presentation component. keeps failing compile because property not exist, timing issue property not there when first tries load form.

so how set default value or initial value in form control after @input() customer value available.

presentation component

    import { component, oninit, input, output, eventemitter, changedetectionstrategy} '@angular/core'; import { formbuilder, formgroup, formarray, validators, formcontrol } "@angular/forms";  // mojito models import { customermodel } '../../models/customer-model';  @component({   selector: 'mj-customer-detail',   templateurl: './customer-detail.component.html',   styleurls: ['./customer-detail.component.scss'],   changedetection: changedetectionstrategy.onpush }) export class customerdetailcomponent implements oninit {    @input() customer: customermodel;   @output() showview: eventemitter<string> = new eventemitter<string>();    customerform: formgroup;    constructor(private fb: formbuilder) {}    ngoninit() {      this.customerform = this.fb.group({       name: [this.customer.name, validators.required],  // fails compile       overview: ['', validators.required],       imagepath: ['', validators.required]     });    }  } 

template

{{customer?.name}} **// works fine displays customer name**  <form [formgroup]="customerform"  (ngsubmit)="onsavecustomer(contact)">      <md-card class="demo-card demo-basic">         <md-card-content>             <br>             <table style="width: 100%" cellspacing="0">                 <tr>                     <td>                         <img [src]="imagepath.value" class="card-image">                     </td>                     <td>                         <md-input-container style="width: 100%">                             <input mdinput placeholder="image url" style="width: 100%" formcontrolname="imagepath" type="text" id="imagepath" #imagepath/>                         </md-input-container>                     </td>                 </tr>             </table>              <md-input-container style="width: 100%">                 <input mdinput placeholder="name" style="width: 100%" formcontrolname="name" type="text" id="name" #name/>             </md-input-container>             <md-input-container style="width: 100%">                 <input mdinput placeholder="overview" style="width: 100%" formcontrolname="overview" type="text" id="overview" #overview/>             </md-input-container>          </md-card-content>     </md-card>  </form> 

smart component

customer component

import { component, oninit } '@angular/core'; import { router } "@angular/router";  // 3rd party modules import { store } '@ngrx/store'; import { observable } 'rxjs';  // mojito components import { applicationstate } '../../store/application-state'; import { customereffects } '../../store/effects/customers.effects'; import { add_customer_success, getcustomers, addcustomer, customerselected } '../../store/actions/customer.actions'; import { customermodel } '../models/customer-model';   @component({   selector: 'mj-customer',   templateurl: './customer.component.html',   styleurls: ['./customer.component.scss'] }) export class customercomponent implements oninit {    customers$: observable<customermodel>;   customer$: observable<customermodel>;   addcustomersuccess$ : observable<any>;   showview: string = 'list';    constructor(private router: router, private store: store<applicationstate>, private customereffects : customereffects) {      this.store.dispatch(getcustomers());     this.customers$ = store.select("customers");     this.customer$ = store.select("customer");      this.addcustomersuccess$ = this.customereffects.addcustomer$.filter(( { type } ) => type === add_customer_success);    }    addcustomer( customer: customermodel ) {      this.store.dispatch(addcustomer(customer));    }    ngoninit() {     }    onselectedcustomer(selectedcustomerid){      this.store.dispatch(customerselected(selectedcustomerid));    }    changeview(viewtype){      this.showview = viewtype;    }  } 

customer template

<mj-customer-detail (showview)="changeview($event)" [hidden]="showview!='detail'" [customer]="customer$ |async"></mj-customer-detail> 

just update form when value:

  ngonchanges() {     if(this.customer) {       this.customerform.get('name').setvalue(this.customer.name);     }   }    ngoninit() {     this.customerform = this.fb.group({       name: [null, validators.required],  // fails compile       overview: ['', validators.required],       imagepath: ['', validators.required]     });   }