I have been working on a form using Angular 2 (RC.3) and noticed that the `ngForm` directive is not recognizing default values set with the `value` attribute.
// app.component.html
<form (ngSubmit)="onSubmit(editForm.value)" #editForm="ngForm">
<input ngControl="firstName" type="text" value="{{user?.firstName}}">
<input ngControl="lastName" type="text" value="{{user?.lastName}}">
<input type="submit" value="Edit">
</form>
// app.component.ts
...
export class AppComponent {
public user: UserModel;
constructor(private _api: ApiService) {
// Getting user data.
this._api.get('/users/self').subscribe(
(user: UserModel): void => { this.user = user; }
);
}
onSubmit(user: UserModel): void {
console.log(user);
}
}
When the `user` object holds data, the `input` elements are populated with the `firstName` and `lastName` from the `user` object. However, if the `value` attribute values are not changed, the `editForm.value` returns empty like below:
{ firstName: null, lastName: null }
If the `input` element values are modified, `editForm.value` reflects these changes. What could be the solution?
I'm also confused about the proper usage of `ngControl` and `ngModel`. While `ngControl` handles validations and operation statuses, `ngModel` is meant to sync presentation layer models. I am unsure about the distinction between `ngControl` and `ngModel`.
It seems like we can retrieve form values using only `ngControl`, rendering `ngModel` and two-way binding unnecessary...