typescript - Angular flernivå inbäddade formulär

Med Angular 5 och reaktiva formulär försöker jag skapa ett inbäddat formulär inom ett annat inbäddat formulär i olika komponenter: Main Form Component innehåller en Contact Component som innehåller en Address Component. Contact och Address komponenterna innehåller båda ett FormGroup. Jag kan få en-nivå-inbäddning att fungera (Main Form och Contact) men Address formuläret fungerar inte.

Här är vad jag har provat hittills:

Huvudform:

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

Testformulär:

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

Adressformulär:

<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", "adress": { "adress1": null, "adress2": null, "stad": null, "stat": null, "postnummer": null } } }

Som du kan se får kontrollerna i Huvudformulär och Testformulär värden, men Adressformuläret är null även efter att värden skrivits in.