将 Angular2 FormBuilder 与 API 获取的数据相结合

Question

我有一个Edit Profile视图，我正在从远程服务器获取数据，然后我想用从服务器返回的数据填充表单。这是我尝试过的，它工作正常，但我不知道这是否是正确的方法。

所以在ngOnInit(里面)我正在创建formBuilder现实中的表单比这大得多，所以为了保持问题的简单性，我只添加了两个字段

ngOnInit() {
this.profile = this.formBuilder.group({
firstName: ['', [Validators.required]],
lastName: ['Last Name'],
});
//Get profile data 
this.getProfileData();
}

getProfileData()是随后调用服务以获取配置文件数据的方法

getProfileData() {
this.service.profileData().then(data => {
this.firstName = data.first_name;
this.lastName = data.last_name;
});
}

在我有的视图内

<form [formGroup]="profile" (ngSubmit)="profileEditForm()">
<ion-item no-padding>
<ion-label stacked>First Name</ion-label>
<ion-input type="text" [(ngModel)]="firstName" formControlName="firstName"></ion-input>
</ion-item>
<ion-item no-padding>
<ion-label stacked>Last Name</ion-label>
<ion-input type="text" [(ngModel)]="lastName" formControlName="lastName"></ion-input>
</ion-item>
<button ion-button type="submit" [disabled]="!profile.valid" full>Submit</button>
</form>

我的问题是

1. 有没有办法将formbuilder字段与我从 api 获得的响应绑定，或者我这样做的方式是正确的方法？
2. 在视图中而不是[(ngModel)]="firstName"不应该[(firstName)]工作吗？

将不胜感激对此的任何帮助。

Answer 1

收到响应后使用patchValue(或setValue)。在模型驱动形式中，不要对ngModel使用双向绑定。您可以通过将值设置为表单控件来实现所需的目标。在这里，让我们在收到值后设置值：

getProfileData() {
this.service.profileData().then(data => {
this.patchValues(data);  // call function to set the values  
});
}
patchValues(data) {
this.profile.patchValue({
firstName: data.first_name,
lastName: data.last_name
})
}

希望这有帮助！ :)