Why do i get an error saying error TS2339: Property 'controls' does not exist on type 'AbstractControl'

Question

Going round in circles here all the articles and questions here advise referring to controls property in the template for a form array in an Angular 9 project.

However i get an error saying controls property does not exist. All of my data is pulling through to the form its just this compile error thats throwing me.

Template

<form name="mainForm" [formGroup]="mainForm">
   <div formArrayName="phoneNumbers" *ngFor="let item of mainForm.get('phoneNumbers').controls; let i = index">
      <div [formGroupName]="i">
         <input formControlName="label" />
         <input formControlName="number" />
      </div>
   </div>
</form>

Component

import { Person } from "@shared/models/person.model";
import { DataService } from "../services/people-data-service";
import {
    Component,
    OnInit,
    ViewEncapsulation,
    ChangeDetectionStrategy,
    Inject
} from "@angular/core";
import { FormBuilder, FormGroup, FormArray, FormControl } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import { fuseAnimations } from "@fuse/animations";

@Component({
    selector: "fw-person",
    templateUrl: "./person.component.html",
    styleUrls: ["./person.component.scss"],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class PersonComponent implements OnInit{
    id: string;
    entity: Person;
    pageType: string;
    mainForm: FormGroup;

    constructor(
        @Inject("PeopleService")
        private _dataService: DataService<Person>,
        private _activatedRoute: ActivatedRoute,
        private _formBuilder: FormBuilder,

    ) {
        this.entity = new Person();
    }

    ngOnInit(): void {
        this.id = this._activatedRoute.snapshot.params["id"];

        if (this.id !== "new") {
            this._dataService.getByKey(this.id).subscribe(entity => {
                this.entity = new Person(entity);
                this.updateFormFields(entity);
                this.pageType = "edit";
                });
        } else {
            this.pageType = "new";
            this.entity = new Person();
        }

        this.mainForm = this.createPersonForm();

    }

    createPersonForm(): FormGroup {
        return this._formBuilder.group({
            firstName: [this.entity.firstName],
            familyName: [this.entity.familyName],
            phoneNumbers: this._formBuilder.array([]),
        });
    }

    updateFormFields(entity): void {
        Object.keys(this.mainForm.controls).forEach(key => {
            this.mainForm.controls[key].patchValue(entity[key]);
        });
    }

    get phoneNumbers() {
        return this.mainForm.get('phoneNumbers') as FormArray;
      }
}

Person Model

export class Person{
    firstName: string;
    familyName: string;
    phoneNumbers: [{
        label: string,
        number: string
    }];

    constructor(person?) {
        {
            this.firstName = person.firstName || '';
            this.familyName = person.familyName || '';
            this.fullName = person.firstName + ' ' + person.familyName || '';
            this.phoneNumbers = person.phoneNumbers || [{label:'Work', number:'123'}];
        }
    }

}

Answer 1

This was a tough one to solve thanks @bjdose.

After reviewing many solutions I have now put together some code that works for anyone else having this problem.

Template

<form name="mainForm" [formGroup]="mainForm">
     <div formArrayName="phoneNumbers">
         <div *ngFor="let phoneNumber of getPhoneNumbers(); let i = index">
             <div [formGroupName]="i">
                 <mat-form-field>
                    <mat-label>Label</mat-label>
                        <input matInput placeholder="Label" name="label" 
                            formControlName="label"/>
                    </mat-form-field>

                    <mat-form-field>
                        <mat-label>Number</mat-label>
                            <input matInput placeholder="Number" name="number" 
                                 formControlName="number"/>

                    </mat-form-field>
                     <button mat-raised-button type="button"
                                  (click)="addPhoneNumber()">Add</button>

                     <button mat-raised-button type="button"
                                  (click)="removePhoneNumber(i)">Remove</button>
                 </div>
           </div>
     </div>
</form>

TS CODE

import { FormBuilder, FormGroup, FormArray, FormControl } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";

@Component({
    selector: "fw-person",
    templateUrl: "./person.component.html",
    styleUrls: ["./person.component.scss"],

})
export class PersonComponent implements OnInit {

id: string;
mainForm: FormGroup;
entity: Person;

constructor(

        private _formBuilder: FormBuilder,


    ) {
        this.entity = new Person();


    }

ngOnInit(): void {
        this.id = this._activatedRoute.snapshot.params["id"];

        this.country = _.find(this.countries, {
            id: this._translateService.currentLang
        });

        if (this.id !== "new") {
            this._dataService.getByKey(this.id).subscribe(entity => {
                this.entity = new Person(entity);

                this.updateFormFields(entity);

            });
        } else {
            this.pageType = "new";
            this.entity = new Person();
        }

        this.mainForm = this.createPersonForm();


    }

createPersonForm(): FormGroup {
        return this._formBuilder.group({
            id: [this.entity.id],
            code: [this.entity.code],
            firstName: [this.entity.firstName],
            familyName: [this.entity.familyName],
            handle: [this.entity.handle],
            companyId: [this.entity.companyId],
            phoneNumbers: this._formBuilder.array([this.newPhoneNumber()]),
            tags: [this.entity.tags],
            images: this._formBuilder.array([this.entity.images]),
            active: [this.entity.active]
        });
    }

updateFormFields(entity): void {
        Object.keys(this.mainForm.controls).forEach(key => {
            this.mainForm.controls[key].patchValue(entity[key]);
        });
    }

newPhoneNumber(): FormGroup {
        return this._formBuilder.group({
            label: "",
            number: ""
        });
    }

    addPhoneNumber() {
        (this.mainForm.get("phoneNumbers") as FormArray).push(
            this.newPhoneNumber()
        );
    }

    removePhoneNumber(i: number) {
        (this.mainForm.get("phoneNumbers") as FormArray).removeAt(i);
    }

    getPhoneNumbers(): any {
        return (this.mainForm.get("phoneNumbers") as FormArray).controls;
    }
}