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);
      });
    }

  }

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

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

Answer 1

您需要做的是，在收到来自后端的数据后，在 FormGroup 上使用 patchValue 或 setValue。

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

设置值

This method performs strict checks, so it will throw an error if you try to set the value of a control that doesn't exist or if you exclude the value of a control.

补丁值

It accepts both super-sets and sub-sets of the group without throwing an error.

因此，如果您的数据对象完全反映了您的表单对象，请使用 setValue。否则，在调用 setValue 方法之前，您要么必须使用 patchValue，要么将数据对象转换为表单对象的镜像。

Ionic3 FormBuilder 绑定模型值

Ionic3 FormBuilder bind model values

ionic-framework

ionic2

ionic3

angular