时间戳

首页 > 解决方案 > 用Angular中的formArray修补formGroup中的值？

angular - 用Angular中的formArray修补formGroup中的值？

问题描述

https://stackblitz.com/edit/angular-fzgtqc?file=src%2Fapp%2Fapp.component.ts 可重现示例。

这是我正在处理的示例数据https://stackblitz.com/edit/angular-fzgtqc?file=SampleData

app.component.ts 

editTrainner(trainner: Trainner) {
    this._trainnerservice.currentTrainner = Object.assign({}, trainner);
    this.registrationForm.patchValue({
          personal_details: { type: Object,
            name: { type: Object,
                first_name: this._trainnerservice.currentTrainner.personal_details.name.first_name,
                last_name: this._trainnerservice.currentTrainner.personal_details.name.last_name
            },
            dob: this._trainnerservice.currentTrainner.personal_details.dob,
            about_yourself: this._trainnerservice.currentTrainner.personal_details.about_yourself,
            languages_known: this.fb.array([this.addlanguages_known()]),
            willingly_to_travel: this._trainnerservice.currentTrainner.personal_details.willingly_to_travel
        }
    });
  }
  addlanguages_known(): any {
    const control = this.registrationForm.get('languages_known') as FormArray;
    this._trainnerservice.currentTrainner.personal_details.languages_known.forEach(x => {
        control.push(this.fb.control(''));
      });
  }

执行代码时出现错误：“无法读取属性‘push’ of null ”

当用户单击编辑按钮时，我想将表单数组数据推送到表单中。

标签： angularangular-reactive-forms

解决方案

首先，您应该删除从内部设置表单数组值的函数patchValue。addlanguages_known()而是按原样调用函数。那么你到formarray的路径不正确。您的 formarray 在 inside personal_details，因此正确：

addlanguages_known(): any {
  const control = this.registrationForm.get('personal_details.languages_known') as FormArray;
  this._trainnerservice.currentTrainner.personal_details.languages_known.forEach(x => {
    control.push(this.fb.control(x));
  });
}

如前所述，从以下行中删除editTrainner()：

languages_known: this.fb.array([this.addlanguages_known()]),

你的分叉 STACKBLITZ

PS：不相关，但是您使用的是某种通用类型Object，您应该根据模型键入数据。

推荐阅读