title: Angular 8: Nested Reactive Form in sub-component not working
body: <p>I'm using Angular 8 Nested Reactive Form in a child component, but it does not work. I have searched the official Angular documentation, but I can not find any example on this.</p>
  
  <p>My solution is available at <a href="https://stackblitz.com/edit/angular-vyaj57?file=src%2Fapp%2Fcompany%2Fcompany.component.ts" rel="nofollow noreferrer">stackblitz.com</a>. I'm unable to show companyName for each company and address details for each address. Any ideas?</p>
  
  <p>According to <strong>Kara Ericksons talk about “Angular Forms” at the Angular Connect 2017</strong> it should be straight forward...</p>
  
  <p>Her video <a href="https://www.thecodecampus.de/blog/nested-forms-in-angular/" rel="nofollow noreferrer">Nested Forms in Angular</a> between 35:31-36:51</p>
  
  <p>In <strong>parent.component.html</strong></p>
  
  <pre><code>&lt;form [formGroup]="form"&gt;
  
      &lt;div *ngFor="let address of addresses"&gt;
          &lt;app-child [address]="address"&gt;&lt;/app-child&gt;
      &lt;/div&gt;
  
      &lt;button type="submit"&gt;Save&lt;/button&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>In <strong>parent.component.ts</strong></p>
  
  <pre><code>export class ParentComponent implements OnInit {
  
    form = new FormGroup({});
  
    addresses : Address[] = [
      new Address("Street 1", "City 1"),
      new Address("Street 2", "City 2"),
      new Address("Street 3", "City 3"),
    ]
  
    constructor() { }
  
    ngOnInit() {
    }
  }
  
  </code></pre>
  
  <p>In <strong>child.component.html</strong></p>
  
  <pre><code>&lt;div formGroupName="address"&gt;
  
       &lt;input formControlName="street"&gt;
       &lt;input formControlName="city"&gt;
  
  &lt;/div&gt;
  
  </code></pre>
  
  <p>In <strong>child.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'app-child',
    templateUrl: './child.component.html',
    styleUrls: ['./child.component.less']
  })
  export class ChildComponent implements OnInit {
  
    @Input() address: Address;
    form: FormGroup;
  
    constructor(parent: FormGroupDirective) {
      this.form = parent.form;
    }
  
    ngOnInit() {
      this.form.addControl('address', new FormGroup({
        street: new FormControl()
        city: new FormControl()
  
      }));
    }
  }
  
  </code></pre>