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

在示例数据中，您将找到“技术” ，因为我要加载一个阵列组，而不是第二个组。您可以在stackblitz链接中检查输出。

Answer 1

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

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

将formGroup的多个数组的数据加载到表单中？怎么样？

1 个答案: