In this article i am going to show how we can build nested angular template drived form.

I am assuming you have already known what ngForm , ngModel , ngModelGroup directives are for.

So let’s start with simple form:

Stackblitz example

There is nothing new here for those how do it every day. We’ve written form containing firstName and lastName fields and we’re expecting the result like:

{

"firstName": "",

"lastName": ""

}

Now let’s imagine our client has changed requirements and we have to add address fields to our form:

Stackblitz example

and the value will look as follows:

{

"firstName": "",

"lastName": "",

"address": {

"zip": "",

"street": "",

"city": ""

}

}

As the app grows inevitably you will face the situation when you need to reuse address fields from the preceding template.

That’s time to refactor our code. For that we can create AddressComponent

address.component.ts

and use it in parent component:

parent.html

Stackblitz example

The problem

Unfortunately, as soon as we do it, we’ll get the error:

Template parse errors: No provider for ControlContainer (“[ERROR ->]<fieldset ngModelGroup=”address”>