Dividing a form into multiple components with validation

Question

I want to create a single big form with angular 2. But I want to create this form with multiple components as the following example shows.

App component

Answer 1

I'd like to share approach that did the job in my case. I've created following directive:

import { Directive } from '@angular/core';
import { ControlContainer, NgForm } from '@angular/forms';

@Directive({
  selector: '[appUseParentForm]',
  providers: [
    {
      provide: ControlContainer,
      useFactory: function (form: NgForm) {
        return form;
      },
      deps: [NgForm]
    }
  ]
})
export class UseParentFormDirective {
}

Now, if you use this directive on child component, for example:

controls from AddressComponent will be added to form1. As a result form validity will also depend on state of controls inside child component.

Checked only with Angular 6