How can display nested array data in form array in angular2?

Question

I have implemented FormGroup in angular2 project to render form and i have used formArray for getting nested array data

form.compon

Answer 1

Here let's assume you have extracted the content from the object basics_info, i.e:

and assigned the JSON to a variable data, so that you end up with this content of data:

{
    "name": "Joh Doe",
    "label": "Programmer",
    "Social_profiles": [{
        "network": "Twitter",
        "url": "https://www.twitter.com/kumarrishikesh12"
    }, {
        "network": "Facebook",
        "url": "https://www.facebook.com/kumarrishikesh12"
    }]
}

Then let's patch the values. You can patch the values after you have received the JSON (or build the form) after receiving data. Here I patch values after form has been built.

Below I like for clarification call another method inside patchValues, which actually sets the values.

patchValues() {
  const control = <FormArray>this.resumeForm.controls['social_profiles'];
  this.data.Social_profiles.forEach(x => { // iterate the array
     control.push(this.patch(x.network, x.url)) // push values
  });
}

patch(network, url) {
  return this.fb.group({
    network: [network],
    url: [url]
  });
}

The child should catch these changes just fine. Here's a demo for you, the variables are different, since I used an existing form I had. But the logic is absolutely the same.

Plunker