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

Question

I want to load the data into the form, by clicking the edit button. Currently, I am able to load only single array data into the form. but unable to load multiple array data.

Here is: https://stackblitz.com/edit/angular-fzgtqc?Sile=src%2Fapp%2Fapp.component.ts

I have already patched the data into the form but only of a single array, not multiple array.

Here is the sample data:

 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
    }],
};

Below function will be executed when an edit button is clicked

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

In the sample data, you will find "technologies" , in that I am to load one array group, not the second group. You can check the output in the stackblitz link.

Answer 1

When you are initializing the form you only have 1 FormGroup in technologies FormArray . So when you are patching only 1 value gets rendered. You need to add more FormGroup 's to technologies based on server response then patch. Based on your stackblitz add this as first lines of editTrainner function.

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