[Solved] How to implement nested data form in angular2

Question

Here is your code, which sets the data you are receiving from backend, here I have stored it in a variable data.

Please notice, this is a shortened version of your form, but the basics are there, you only need to add the few missing properties in corresponding form arrays.

The build of the empty form looks is just a FormArray named work_experience matching your json structure:

this.myForm = this.fb.group({
  work_experience: this.fb.array([])
})

We add the fields when you are receiving the data, call a function called setWorkExperience in the callback when receiving data:

setWorkExperience(){
  // get the formarray
  let control = <FormArray>this.myForm.controls.work_experience;
  // iterate the array 'work_experience' from your JSON and push new formgroup with properties and the inner form array
  this.data.work_experience.forEach(x => {
    // add the rest of your properties also below
    control.push(this.fb.group({company: x.company, project_experience: this.setFormArray(x)}))
  })
}

setFormArray is called from the previous function, where we patch the data with from project_experience to the inner form array:

setFormArray(x) {
  // create local array which is returned with all the values from the 'project_experience' from your JSON
  let arr = new FormArray([])
  x.project_experience.map(y => {
    // add the rest of your properties below
    arr.push(this.fb.group({projectName: y.projectName}))
  })
  return arr;
}

The template would then look like this:

<form [formGroup]="myForm">
  <!-- Outmost array iterated -->
  <div formArrayName="work_experience">
    <div *ngFor="let a of myForm.get('work_experience').controls; let i=index">
      <h3>COMPANY {{i+1}}: </h3>
      <div formGroupName="{{i}}">
        <label>Company Name: </label>
        <input formControlName="company" /><span><button (click)="deleteCompany(i)">Delete Company</button></span><br><br>
        <!-- inner formarray iterated -->
        <div formArrayName="project_experience">
          <div *ngFor="let b of myForm.controls.work_experience.controls[i].controls.project_experience.controls; let j=index">
            <h4>PROJECT {{j+1}}</h4>
            <div formGroupName="{{j}}">
              <label>Project Name:</label>
              <input formControlName="projectName" /><span><button (click)="deleteProject(a.controls.project_experience, j)">Delete Project</button></span>
            </div>
          </div>
          <button (click)="addNewProject(a.controls.project_experience)">Add new Project</button>
        </div>
      </div>
    </div>
  </div>   
</form>

In the template you can see the buttons for add and delete of projects and companies. Adding and deleting companies are straightforward, where initCompany() returns a formGroup:

deleteCompany(index) {
  let control = <FormArray>this.myForm.controls.work_experience;
  control.removeAt(index)
}

addNewCompany() {
  let control = <FormArray>this.myForm.controls.work_experience;
  control.push(this.initCompany())
}

In the add project we pass as parameter from the template the current formArray control, to which we just push a new FormGroup:

addNewProject(control) {
  control.push(this.initProject())
}

In the delete function we pass the current formarray as well as the index of the project we want to delete:

deleteProject(control, index) {
  control.removeAt(index)
}

That should cover pretty much everything.

Plunker

Accepted Answer