Nested arrays in Angular 2 reactive forms?

Question

I have use the following tutorial to create reactive forms in Angular 2 and it works well.

https://scotch.io/tutorials/how-to-build-nested-model-driven-forms-in-angu

Answer 1

Using the tutorial above, I have created an 'Organisation' form, which can contain an array of 'Contact' groups. But I am unable to successfully adapt the setup to allow each 'Contact' group to contain an array of 'Email' groups.

The tutorial above gives you all what you need.

I suppose you want structure like this.

Firstly you need some component (AppComponent in my case) where you declare root FormGroup. I called it trustForm below.

app.component.ts

export class AppComponent {
  trustForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.trustForm = this.fb.group({
      name: '',
      contracts: this.fb.array([])
    });

    this.addContract();
  }

  initContract() {
    return this.fb.group({
      name: '',
      emails: this.fb.array([])
    });
  }

  addContract() {
    const contractArray = this.trustForm.controls['contracts'];
    const newContract = this.initContract();

    contractArray.push(newContract);
  }

  removeContract(idx: number) {
    const contractsArray = this.trustForm.controls['contracts'];
    contractsArray.removeAt(idx);
  }
}

In this component you have also some methods that help you to manipulate the first level FormArray - contracts

app.component.html

    

        
Add trust

        

            Name
            
        

        
        

            

                

                    Contract {{i + 1}}
                    
                
                

                    
                
            
        
        

            
                Add another contract +
            
        

    

    
Details
    
{{ trustForm.value | json }}

There is no different from root html from the tutorial except different FormArray name.

Then you need to build contract component that will be similar to AppComponent

contract.component.ts

export class ContractComponent {
    @Input('group') contractGroup: FormGroup;

    constructor(private fb: FormBuilder) { }

    addEmail() {
        const emailArray = this.contractGroup.controls['emails'];
        const newEmail = this.initEmail();

        emailArray.push(newEmail);
    }

    removeEmail(idx: number) {
        const emailArray = this.contractGroup.controls['emails'];
        emailArray.removeAt(idx);
    }

    initEmail() {
        return this.fb.group({
            text: ''
        });
    }
}

contract.component.html

    

        Name
        
    

    
    

        

            

                Email {{i + 1}}
                
            
            

                
            
        
    
    

        
            Add another email +
        
    

As you can see we just replace contracts to emails FormArray and we are also passing FormGroup to email component

And finally you will only need to fill EmailComponent with desired fields.

email.component.ts

export class EmailComponent {
    @Input('group') emailGroup: FormGroup;
}

email.component.html

    

        Text
        
    

Completed version you can find at Plunker Example

If you think that this solution doesn't seems right because the parent component holds the description of the child component like initContract and initEmails you can take a look at more complex

Plunker Example

where each component is responsible for its functionality.

If you're looking for solution for template driven forms read this article:

• Angular: Nested template driven form