Angular2 : Ajax form data return null

I'm trying to set a dynamic form in Angular2. So, in my ngOnInit function, I made a Ajax request to get a JSON with form data. Like this :

export class CustomerEditComponent{
  private customer : Customer = new Customer();
  private customerForm;

  constructor(private _CustomersService: CustomersService, private _routeParams: RouteParams, private _fb: FormBuilder){
    this.customerForm = _fb.group({
      name: [],
      job: [],
      arrival_date: []
    });
  }

  ngOnInit(){
    let id = this._routeParams.get('id');
    this._CustomersService.getById(id).subscribe(res => {
      this.customer = res;
    });
  }

  onSubmit(event){
    console.log(event);
  }
}

So, at the component construct, 'customer' is equals to a newest one. (all properties are empty). But just after, we set value to every properties.

No problem for that, my input has the correct values.

But, if I submit my form, the form value is equals to :

Object {name: null, job: null, arrival_date: null}

(But the form in the view is correctly populate).

Here my form (condensed) :

<form [ngFormModel]="customerForm" (ngSubmit)="onSubmit(customerForm.value)">
  <input md-input [(value)]="customer.name">
  <input md-input [(value)]="customer.job">
  <input md-input type="date" [(value)]="customer.arrival_date">

  <button type="submit">Save</button>
</form>

I use [(value)] cause ng2-material package. (I already try with ngControl).

I think my code is 'wrong' about this feature, but I dunno where.

Thanks !

EDIT :

I have found the answer ! With ng2-material, we need to set [(value)] and [(ngModel)] together on every input like this :

<form [ngFormModel]="customerForm" (ngSubmit)="onSubmit(customerForm)">
  <input md-input [(value)]="customer.name" [(ngModel)]="customer.name">
  <input md-input [(value)]="customer.job" [(ngModel)]="customer.job">
  <input md-input type="date" [(value)]="customer.arrival_date" [(ngModel)]="customer.arrival_date">

  <button type="submit">Save</button>
</form>

[(value)] is used by ng2-material to set the value 'on front'.

Solution

I think that the problem is that you didn't associate your form inputs with their controllers within the ngFormControl directive in your template. You should refactor that way:

<form [ngFormModel]="customerForm" (ngSubmit)="onSubmit(customerForm.value)">
  <input md-input [(value)]="customer.name" 
     ngFormControl="name">
  <input md-input [(value)]="customer.job"
     ngFormControl="job">
  <input md-input type="date" [(value)]="customer.arrival_date"
     ngFormControl="arrival_date">

  <button type="submit">Save</button>
</form>

See this link from ng2-material samples: https://github.com/justindujardin/ng2-material/blob/master/examples/components/input/form_builder.html

Otherwise why don't you use the customer object instead of the customerForm.value one?

Hope it helps you, Thierry