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?

Krishna Rathore · Accepted Answer · 2018-09-05 05:48:48Z

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()])
      })
    )
  }

edited Sep 5, 2018 at 5:48

answered Sep 4, 2018 at 13:36

Krishna Rathore

9,7375 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Random Guy Over a year ago

In the link which I shared, control has been passed as a parameter to add new project. How can I call addNewProject() from addNewCompany() so that when I create a new company, a new project gets created along with it?

Collectives™ on Stack Overflow

Add nested formbuilder arrays in a formbuilder group

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related