Suppose we have a basic component with the following code

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormControl, FormBuilder } from '@angular/forms';

@Component({
  selector: 'howtojs-reactiveforms',
  templateUrl: './reactiveforms.component.html',
  styleUrls: ['./reactiveforms.component.css']
})
export class ReactiveformsComponent implements OnInit {

  myForm: FormGroup;
  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      emails: this.fb.array([this.fb.control('')])
    })
  }

  ngOnInit(): void {
  }

}

If we then bind the above form in the HTML like this,

<form [formGroup]="myForm">
    <ng-container formArrayName="emails">
        <div class="mb-3" *ngFor="let email of myForm.controls['emails'].controls; let i=index;">
            <label for="exampleInputEmail1" class="form-label">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" [formControlName]="i"
                aria-describedby="emailHelp">
        </div>
    </ng-container>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Then, we will come across an error “Property ‘controls’ does not exist on type ‘AbstractControl'” like this

Reason for Property ‘controls’ does not exist on type ‘AbstractControl’ error:

Inside a Form Group, we can have three types of properties. That is, each property can be a Form Control or Form Group or a Form Array. TypeScript does not know which type of property each property is and gives a default AbstractControl (which is a base class of FormControl, FormArray and FormGroup) type to it. Since controls property exists only on FormArray and FormGroup and not on AbstractControl, we get the error message Property ‘controls’ does not exist on type ‘AbstractControl’.

Solution for Property ‘controls’ does not exist on type ‘AbstractControl’ error in Angular 13+ Applications

To solve the problem, we need to tell TypeScript that the control on which we are trying to use controls property is not a FormControl but is a Form Array. To do it, we can create a function in our ts file (usually a getter function) and return the control as Form Array like this

get emails() {
    return this.myForm.controls['emails'] as FormArray
  }

then, we can modify our HTML like this

<div class="mb-3" *ngFor="let email of emails.controls; let i=index;">
...
</div>