如何將表單輸入綁定到對象？

Question

我有以下表格：

<form role="form" [ngFormModel]="userEditForm"  (ngSubmit)="editUser(user)">
<div>
    <label for="username">Username</label>
    <input type="text" #username id="username" placeholder="Username" [ngFormControl]="userEditForm.controls['username']">
</div>
<div>
    <label for="firstName">First Name</label>
    <input type="text" #firstName id="firstName" placeholder="First Name" [ngFormControl]="userEditForm.controls['firstName']">
</div>
<div>
    <label for="lastName">Last Name</label>
    <input type="text" #lastName  id="lastName" placeholder="Last Name" [ngFormControl]="userEditForm.controls['lastName']">
</div>
<div>
    <label for="email">Email</label>
    <input type="text" #email  id="email" placeholder="Email" [ngFormControl]="userEditForm.controls['email']">
</div>
<button type="submit">Submit</button>

在我的組件中，我定義了：

        constructor(private _routeParams:RouteParams, private _formBuilder:FormBuilder, private _UserInject:UserInject){
    this.userEditForm = _formBuilder.group({
        'firstName': [this.user.firstName],
        'lastName': [this.user.lastName],
        'username': [this.user.username],
        'email': [this.user.email],
    })
}

ngOnInit(){
    let id = this._routeParams.get('userId');
    this.user = this._UserInject.getUser(id);
}

}

但是，這將導致錯誤，因為尚未在構造函數中定義this.user。 有任何想法嗎？

更新

當我在ngOnInit中使用formBuilder時，它可以工作-但是，我不確定這是否是正確的方法。

Answer 1

隨便走

this.userEditForm = _formBuilder.group({
    'firstName': [this.user.firstName],
    'lastName': [this.user.lastName],
    'username': [this.user.username],
    'email': [this.user.email],
})

在分配this.user的代碼之后（進入ngOnInit() ）