Add nested formbuilder arrays in a formbuilder group

Question

I came across the following Stackblitz demo :

https://stackblitz.com/edit/angular-dffny7?file=app

with reference to the below post: https://stackoverflow.com/a/48527939/7429196

I need that when the user adds a new Company (e.g Company2), it should get created along with its respective project (say, Project2).

I am not getting the correct way to add nested formbuilder arrays in a formgroup. Can any one please tell me how I can do it?

Answer 1

You can try with this solution.

nested formbuilder arrays in a formbuilder group

Stackblitz Demo

  createProjectGroup(){
    return this.fb.group({
        projectName: ['']
      })
  }



addNewCompany() {
    let control = <FormArray>this.myForm.controls.companies;
    control.push(
      this.fb.group({
        company: [''],
        projects: this.fb.array([this.createProjectGroup()])
      })
    )
  }