title: Angular multi-level nested forms
body: <p>Using Angular 5 with reactive forms, I'm trying to create a nested form within a nested form in different components: <code>Main Form Component</code> contains a <code>Contact Component</code> which contains an <code>Address Component</code>. <code>Contact</code> and <code>Address</code> components both contain a <code>FormGroup</code>. I'm able to get one-level nesting working (Main Form and Contact) but the <code>Address</code> form doesn't work.</p>
  
  <p>Here's what I've tried so far:</p>
  
  <p>Main Form:</p>
  
  <pre><code>&lt;form [formGroup]="testForm2"&gt;
      &lt;input formControlName="test2" /&gt;
      &lt;app-test-form [parent]="testForm2" formGroupName="testForm1"&gt;&lt;/app-test-form&gt;
  &lt;/form&gt;
  {{testForm2.value | json}}
  
  export class TestFormFormComponent implements OnInit {
      testForm2: FormGroup;
  
    constructor() {
        this.testForm2 = new FormGroup({
            test2: new FormControl(),
            testForm1: TestFormComponent.getFormGroup()
        });
     }
  </code></pre>
  
  <p>Test Form:</p>
  
  <pre><code>&lt;div [formGroup]="parent"&gt;
      &lt;div [formGroupName]="formGroupName"&gt;
          &lt;input formControlName="test1" /&gt;
          &lt;app-address formGroupName="address" [parent]="testForm"&gt;&lt;/app-address&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  export class TestFormComponent implements OnInit {
      testForm: FormGroup;
      @Input() parent: FormGroup;
      @Input() formGroupName: string;
  
      constructor() {
          this.testForm = TestFormComponent.getFormGroup();
      }
  
      static getFormGroup(): FormGroup {
          return new FormGroup({
              test1: new FormControl(),
              address: AddressComponent.getFormGroup()
          });
      }
  
      ngOnInit() {
      }
  }
  </code></pre>
  
  <p>Address Form:</p>
  
  <pre><code>&lt;div [formGroup]="parent"&gt;
      &lt;div [formGroupName]="formGroupName"&gt;
          &lt;mat-form-field&gt;
              &lt;input matInput type="text" formControlName="address1" placeholder="Address Line 1" /&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field&gt;
              &lt;input matInput type="text" formControlName="address2" placeholder="Address Line 2" /&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field&gt;
              &lt;input matInput type="text" formControlName="city" placeholder="City" /&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field&gt;
              &lt;mat-select formControlName="state" placeholder="State"&gt;
                  &lt;mat-option *ngFor="let state of states" [value]="state.id"&gt;
                      {{ state.description | titlecase }}
                  &lt;/mat-option&gt;
              &lt;/mat-select&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field&gt;
              &lt;input matInput type="text" formControlName="zip" placeholder="Zip" /&gt;
          &lt;/mat-form-field&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  export class AddressComponent implements OnInit {
      states: Lookup[];
      @Input() parent: FormGroup;
      @Input() formGroupName: string;
      constructor(private lookupServce: LookupService) {
      }
  
      static getFormGroup() {
          return new FormGroup({
              address1: new FormControl(),
              address2: new FormControl(),
              city: new FormControl(),
              state: new FormControl(),
              zip: new FormControl()
          });
      }
  
      ngOnInit() {
          this.lookupServce.lookupStates().subscribe(data =&gt; {
              this.states = data;
          });
      }
  }
  </code></pre>
  
  <p>Output: 
  <code>{ "test2": "asdf", "testForm1": { "test1": "asdf", "address": { "address1": null, "address2": null, "city": null, "state": null, "zip": null } } }</code></p>
  
  <p>As you can see, controls in Main Form and Test Form are getting values, but Address Form is null even after typing in values.</p>