typescript - Angular flernivå nestede skjemaer

Ved å bruke Angular 5 med reaktive skjemaer, prøver jeg å lage et nestet skjema innenfor et nestet skjema i forskjellige komponenter: Main Form Component inneholder en Contact Component som inneholder en Address Component. Contact og Address-komponenter inneholder begge en FormGroup. Jeg får ett-nivås nestning til å fungere (Main Form og Contact), men Address-skjemaet fungerer ikke.

Her er hva jeg har prøvd så langt:

Hovedskjema:

<form [formGroup]="testForm2">
    <input formControlName="test2" />
    <app-test-form [parent]="testForm2" formGroupName="testForm1"></app-test-form>
</form>
{{testForm2.value | json}}

export class TestFormFormComponent implements OnInit {
    testForm2: FormGroup;

  constructor() {
      this.testForm2 = new FormGroup({
          test2: new FormControl(),
          testForm1: TestFormComponent.getFormGroup()
      });
   }

Testskjema:

<div [formGroup]="parent">
    <div [formGroupName]="formGroupName">
        <input formControlName="test1" />
        <app-address formGroupName="address" [parent]="testForm"></app-address>
    </div>
</div>

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() {
    }
}

Adresseformular:

<div [formGroup]="parent">
    <div [formGroupName]="formGroupName">
        <mat-form-field>
            <input matInput type="text" formControlName="address1" placeholder="Address Line 1" />
        </mat-form-field>
        <mat-form-field>
            <input matInput type="text" formControlName="address2" placeholder="Address Line 2" />
        </mat-form-field>
        <mat-form-field>
            <input matInput type="text" formControlName="city" placeholder="City" />
        </mat-form-field>
        <mat-form-field>
            <mat-select formControlName="state" placeholder="State">
                <mat-option *ngFor="let state of states" [value]="state.id">
                    {{ state.description | titlecase }}
                </mat-option>
            </mat-select>
        </mat-form-field>
        <mat-form-field>
            <input matInput type="text" formControlName="zip" placeholder="Zip" />
        </mat-form-field>
    </div>
</div>

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 => {
            this.states = data;
        });
    }
}

Utdata: { "test2": "asdf", "testForm1": { "test1": "asdf", "address": { "address1": null, "address2": null, "city": null, "state": null, "zip": null } } }

Som du kan se, får kontrollene i Hovedskjema og Testskjema verdier, men Adresseskjemaet er null selv etter å ha skrevet inn verdier.