将 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>

我的问题是

有没有办法将 formbuilder 字段与我从 api 获得的响应绑定，或者我这样做的方式是否正确？
在视图中而不是 [(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
  })
}

希望对您有所帮助！ :)

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

Combine Angular2 FormBuilder with API fetched data

ionic2

angular2-formbuilder

angular