Demo: Nested FormGroups

Placing a FormGroup inside the form makes sense when FormControls logically go together, like an address. I'll show you in this demo how to implement this for an address that contains four FormControls - street, city, state, and zip code.

Recall that since the form itself is also a FormGroup, this makes the address FormGroup nested. To bind this new FormGroup to the template, we'll add a directive called formGroupName on a div that wraps the four new FormControls. This directive is slightly different the one used on the form level, [formGroup], as the address FormGroup is a child of the parent form and must be indicated as such. After clicking submit, you can also check out the new Form Model with the nested FormGroup.