nested-forms/apps/parent-form/src/app/name/name.component.ts

import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
import { Name } from '@nested-forms/contact';
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'nested-forms-name',
  templateUrl: './name.component.html',
  styleUrls: ['./name.component.css']
})
export class NameComponent implements OnInit {

  @Input() name: Name;
  @Input() parent: FormGroup;

  group: FormGroup;

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.group = this.fb.group({
      firstName: new FormControl(this.name ? this.name.firstName : ''),
      lastName: new FormControl(this.name ? this.name.lastName : ''),
      middleName: new FormControl(this.name ? this.name.middleName : ''),
      prefix: new FormControl(this.name ? this.name.prefix : ''),
      suffix: new FormControl(this.name ? this.name.suffix : ''),
    });

    if (this.parent) {
      this.parent.addControl('name', this.group);
    }
  }

}