tl;dr Here’s a demo of our goal.

The basic idea of what we want to do is to have our parent component to handle general fields ( fullName ), and the components to build their own form (thus detaching logic from the parent) and syncing it with their parent.

Sounds rather simple and intuitive, right?

Nicholas Jamieson offered in one of his posts to tackle this using reactive forms’ valueChanges ability to emit the values to the parent every change.

This is good. But I wanted a solution where I would make a single action to ‘bind’ my nested form with the parent.

So.. No, that wasn’t good enough for me.

Then I read of David Herges solution, and found what I wanted. He created a formGroup in our parent and injected it to the child component to then work on it. Single simple action.

… But doesn’t it couple our child with its parent?

Yes. Yes it does. If we decide to remove one of the fields, we have to refactor both our parent and its child.

My solution for this is to take David Herges solution but implement it from the other side. We’ll create our form in our child component, and when it’s ready we’ll inform the parent that a new group of the form was initialized, and set it in the form.

Let’s see some code here. Our child component first:

When our form is ready, we emit it using Angular’s @Output .

Let’s see how we handle this in our parent:

And that’s it! We split our form into several chunks, but we still get a monolithic form synchronized with the small forms.

You can view the full code here.