将 formGroup 的多个数组的数据加载到表单中？如何？

Question

我想通过单击编辑按钮将数据加载到表单中。目前，我只能将单个数组数据加载到表单中。但无法加载多个数组数据。

这里是：https://stackblitz.com/edit/angular-fzgtqc?Sile=src%2Fapp%2Fapp.component.ts

我已经将数据修补成表格，但只是单个数组，而不是多个数组。

示例数据如下：

 data = {
    "trainer_id": "t001",
    "personal_details": {
        "name": {
            "first_name": "ABC",
            "last_name": "Kumar"
        },
        "dob": "1990-12-20",
        "about_yourself": "i am a corporate trainer from 10 years",
        "languages_known": ["Kannada", "English", "Tamil"],
        "willing_to_travel": "yes"
    },
    "technologies": [{
        "name": "Angular 2",
        "experience": 4,
        "ratings": 7.9,
        "costing": {
            "freshers": 8000,
            "laterals": 12000,
            "project_specific": 15000
        },
        "work_as_consultant": "yes"
    },
  {
        "name": "Java",
        "experience": 5,
        "ratings": 8,
        "costing": {
            "freshers": 8000,
            "laterals": 12000,
            "project_specific": 15000
        },
        "work_as_consultant": "yes"
    }
  ],
    "certifications": [{
        "title": "Sun Certified",
        "Year": 1999
    }],
};

单击编辑按钮时将执行以下函数

editTrainner() {
    this._trainnerservice.currentTrainner = this.data;
    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,
            willingly_to_travel: this._trainnerservice.currentTrainner.personal_details.willingly_to_travel
        }
    });
    this.addlanguages_known();
    this.registrationForm.patchValue({
  technologies: this._trainnerservice.currentTrainner.technologies
});
  this.registrationForm.patchValue({
  certifications: this._trainnerservice.currentTrainner.certifications
});
  }
  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));
      });
  }

在示例数据中，您会发现"technologies"，因为我要加载一个数组组，而不是第二组。您可以在 stackblitz link.

中检查输出

Answer 1

当您初始化表单时，您在 technologies FormArray 中只有 1 个 FormGroup。因此，当您修补时，只会呈现 1 个值。您需要根据服务器响应添加更多 FormGroup 到 technologies，然后进行修补。根据您的 stackblitz 将其添加为 editTrainner 函数的第一行。

this._trainnerservice.currentTrainner.technologies.forEach(x => {
    this.addTechnologies();
})

将 formGroup 的多个数组的数据加载到表单中？如何？

Load data of multiple array of a formGroup into the form ? how?

angular

angular-reactive-forms

formarray

formgroups