Angular Reactive Forms with nested Form Arrays

EDIT: 2021 As the typechecking has become more strict (good!) we need to do some changes. Typing the nested formarray cannot be done using a getter. You can use a function instead, but I don't like that idea, as it is called on each change detection. Instead I am working around the typechecking and using ['controls'] instead. If you do want stronger typing for nested array (projects) use a function, but remember the fact that it is called on each change detection... So here is the updated code:

It's not very much different to have a nested formarray. Basically you just duplicate the code you have... with nested array :) So here's a sample:

myForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.myForm = this.fb.group({
    // you can also set initial formgroup inside if you like
    companies: this.fb.array([])
  })
}

// getter for easier access
get companiesFormArr(): FormArray {
  return this.myForm.get('companies') as FormArray;
}

addNewCompany() {
  this.companiesFormArr.push(
    this.fb.group({
      company: [''],
      projects: this.fb.array([])
    })
  );
}

deleteCompany(index: number) {
  this.companiesFormArr.removeAt(index);
}

So that is the add and delete for the outermost form array, so adding and removing formgroups to the nested form array is just duplicating the code. Where from the template we pass the current formgroup to which array you want to add (in this case) a new project/delete a project.

addNewProject(control) {
  control.push(
    this.fb.group({
      projectName: ['']
  }))
}

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

And the template in the same manner, you iterate your outer formarray, and then inside that iterate your inner form array:

<form [formGroup]="myForm">
  <div formArrayName="companies">
    <div *ngFor="let comp of companiesFormArr.controls; let i=index">
    <h3>COMPANY {{i+1}}: </h3>
    <div [formGroupName]="i">
      <input formControlName="company" />
      <button (click)="deleteCompany(i)">
         Delete Company
      </button>
      <div formArrayName="projects">
        <!-- Here I has worked around the typechecking, 
             if you want stronger typechecking, call a function. 
             Remember: function called on each change detection! -->
        <div *ngFor="let project of comp.get('projects')['controls']; let j=index">
          <h4>PROJECT {{j+1}}</h4>
          <div [formGroupName]="j">
            <input formControlName="projectName" />
            <button (click)="deleteProject(comp.get('projects'), j)">
              Delete Project
            </button>
          </div>
        </div>
        <button (click)="addNewProject(comp.get('projects'))">
          Add new Project
        </button>
      </div>
    </div>
  </div>
</div>

DEMO

EDIT:

To set values to your form once you have data, you can call the following methods that will iterate your data and set the values to your form. In this case data looks like:

data = {
  companies: [
    {
      company: "example comany",
      projects: [
        {
          projectName: "example project",
        }
      ]
    }
  ]
}

We call setCompanies to set values to our form:

setCompanies() {
  this.data.companies.forEach(x => {
    this.companiesFormArr.push(this.fb.group({ 
      company: x.company, 
      projects: this.setProjects(x) }))
  })
}

setProjects(x) {
  let arr = new FormArray([])
  x.projects.forEach(y => {
    arr.push(this.fb.group({ 
      projectName: y.projectName 
    }))
  })
  return arr;
}