Ionic3 FormBuilder 绑定模型值

Question

我有一个模型：

export class ProfileModel {
  constructor(
    public name: string,
    public age: number,
    ...
    ...
    ){}
}

我已经构建了一个表单来更新值：

<form  [formGroup]="profileForm" (ngSubmit)="updateProfile(profileForm.value)" autocomplete="off">
        <!-- Name -->
        <ion-item>
            <ion-label>My name</ion-label>
            <ion-input formControlName="name"></ion-input>
        </ion-item>
        <!-- Age -->    
        <ion-item>
            <ion-label>Age*</ion-label>
            <ion-input type="number" formControlName="age"></ion-input>
        </ion-item>

    ...
    ...
    <button ion-button full type="submit" [disabled]="!profileForm.valid">Update</button>
</form>

在我的组件中：

export class ProfilePage {
    public profileForm : FormGroup;
  public receievedProfileData: ProfileModel; 
  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams, 
    private formBuilder: FormBuilder,
    private userService: UserService) {
    this.receievedProfileData= new ProfileModel(null, null,null,null,null,null,null,null,null,null,null,null,null,null);
    this.profileForm = this.formBuilder.group({
      name: [''],
      age: ['', Validators.required],
      ...
      ...
    });
  }

  ionViewWillEnter(){
    this.userService.getProfile().subscribe(
        data => {
          this.receievedProfileData.name=data.name;
          console.log(this.receievedProfileData)
        },
        error => {
        });
  }
  ionViewDidLoad() {

  }
  updateProfile(formData){
    this.userService.updateProfile(formData
      ).subscribe(
      data => {
        this.profileUpdateSuccessMessage="Profile updated successfully!";
      },
      error => {
        console.log("Profile update Error in Profile Page ", error);
      });
    }
  }

现在我看到所有字段都空白的表单。我正在尝试做的是我的用户上次保存的任何值都应该显示在表单上，即我必须以某种方式绑定它们。

我正在从后端获取当前的配置文件信息并将其分配给接收配置文件数据。如何进一步将其绑定到表单或模板？

Answer 1

你需要

做的是，在从后端接收数据后，使用patchValue或setValue FormGroup。

ionViewWillEnter() {
  this.userService.getProfile().subscribe(
    data => this.profileForm.setValue(data)
    // data => this.profileForm.patchValue(data)
  );
}

设置值

此方法执行严格的检查，因此，如果尝试设置不存在的控件的值或排除控件的值，则会引发错误。

补丁值

它接受组的超集和子集，而不会引发错误。

因此，如果数据对象完全镜像表单对象，请使用 setValue 。否则，在调用 setValue 方法之前，必须使用 patchValue 或转换数据对象以镜像表单对象。