How can display nested array data in form array in

Question

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

form.component.html

<div class="col-md-12" formArrayName="social_profiles">
  <div *ngFor="let social of resumeForm.controls.social_profiles.controls; let i=index" class="panel panel-default m-t-10">
    <div class="panel-heading" style="min-height: 30px;">
      <span class="glyphicon glyphicon-remove pull-right" *ngIf="resumeForm.controls.social_profiles.controls.length > 1" (click)="removeSocialProfiles(i)"></span>
    </div>
    <div class="panel-body" [formGroupName]="i">
      <social-profile [group]="resumeForm.controls.social_profiles.controls[i]"></social-profile>
    </div>
  </div>
</div>

form.component.ts

export class FormComponent implements OnInit {
    public resumeForm: FormGroup;

    constructor(private formBuilder: FormBuilder) {}

    ngOnInit() {
        this.resumeForm = this.formBuilder.group({
            name: ['', Validators.required],
            label: ['',],
            email: [''],
            phone: [''],  
            social_profiles: this.formBuilder.array([])
        });

        this.addSocialProfiles();
    }

    initSocialProfiles() {
        return this.formBuilder.group({
            network: [''],
            url: ['']
        });
    }

    addSocialProfiles() {
        const control = <FormArray>this.resumeForm.controls['social_profiles'];
        const addrCtrl = this.initSocialProfiles();        
        control.push(addrCtrl);      
    }

    removeSocialProfiles(i: number) {
        const control = <FormArray>this.resumeForm.controls['social_profiles'];
        control.removeAt(i);
    }
}

Where social-profile is child form for array

social-profile.component.html

<div [formGroup]="socialForm">
    <div class="col-md-6">
        <input type="text" class="form-control" placeholder="Enter Network" formControlName="network">
    </div>
    <div class="col-md-6">
        <input type="text" class="form-control" placeholder="Enter Network URL" formControlName="url">
    </div>
</div>

social-profile.component.ts

export class SocialProfileComponent {
    @Input('group')
    public socialForm: FormGroup;
}

Get JSON from Service callback

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

Add data Form working perfect but how can i display existing nested array of json (which is get from api) in form on edit time on page init ? Like below image

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