Nested groups in Angular2 forms?

Question

I'm using the reactive forms module in Angular 2 to create a form with several nested groups.

My 'trust' form has an array of contacts at

<FormArray>this.newTrustForm.controls['contact']

One of the fields in the 'contact' group is an array of 'email' groups and I tried finding it here, but alas, no. Where would I then find it?

<FormArray>this.newTrustForm.controls['contact'].controls['email']

I setup my form with the following.

constructor(private _fb: FormBuilder) { }

ngOnInit() {
  this.newTrustForm = this._fb.group({
    ...
    contact: this._fb.array([]),
    ...
  });
}

I then add 'contact' groups with the following.

initContact() {
  return this._fb.group({
    ...
    email: this._fb.array([]),
    ...
  });
}

And then I have initContactEmail setup in the same way.

I'm not seeing you iterating through every contact to create the email group. if you're are nesting, you should do this. Take a look at the last example from the oficial site: angular.io/docs/ts/latest/guide/… — Fals

developer033 developer033 · Accepted Answer · 2017-03-02T15:51:15

You have specify the index of contact:

<FormArray>this.newTrustForm.controls['contact'][INDEX]['controls']['email']

Or (more readable):

this.newTrustForm.get(`contact.${INDEX}.email`) as FormArray;

Also, as a suggestion, since contact and email are arrays, you could named them in plural: contacts and emails.

Nested groups in Angular2 forms?

1 Answers