Angular multi-level nested forms

Using Angular 5 with reactive forms, I'm trying to create a nested form within a nested form in different components: Main Form Component contains a Contact Component which contains an Address Component. Contact and Address components both contain a FormGroup. I'm able to get one-level nesting working (Main Form and Contact) but the Address form doesn't work.

Here's what I've tried so far:

Main Form:

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

Test Form:

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

Address Form:

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

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

As you can see, controls in Main Form and Test Form are getting values, but Address Form is null even after typing in values.