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

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.

When clicking addTech you are adding form group only, What is the issue? — Chellappan வ
– Chellappan வ, Commented Sep 19, 2019 at 11:54
for your reference you can check the link in that their is a sample data — GRV
– GRV, Commented Sep 19, 2019 at 11:58

Iftifar Taz · Accepted Answer · 2019-09-19 12:12:00Z

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

answered Sep 19, 2019 at 12:12

Iftifar Taz

8398 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GRV Over a year ago

What is the use of x over here? I mean to use the x?

GRV Over a year ago

i understood your answer theoretically, but practically it will add the new formGroup not loading the data in it

Iftifar Taz Over a year ago

It will add the number of FormGroup's required. Then when you are patching the form with server response all the FormGroup's get populated.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related