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

Question

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

执行代码时出现错误：“Cannot read property 'push' of null”

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

Answer 1

首先，您应该从patchValue 内部删除用于设置formarray 值的函数。而是按原样调用函数addlanguages_known()。那么你到formarray的路径不正确。你的formarray在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()]),

Your forked STACKBLITZ

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