How to fix Angular error TS2739: Type 'AbstractControl' is missing the following properties from type 'FormControl'

I had this error in an Angular 12 project, using code that used to work just fine:

error TS2739: Type 'AbstractControl' is missing the following properties from type 'FormControl'

Solution / how to fix

You will need to add stronger typing to your component model. You can cast your AbstractControl as FormControl and create a reference to devices.controls Then you can create a method that gets a FormControl rather than AbstractControl

You can do that by changing your component.ts like this:

addTerminalGroup: FormGroup;
get terminalNameInput(): FormControl { this.addTerminalGroup.controls.terminalNameInput as FormControl }
get devices(): FormArray { this.addTerminalGroup.controls.devices as FormArray }

constructor(private formBuilder:FormBuilder){
    this.addTerminalGroup = this.formBuilder.group({
        terminalNameInput : new FormControl('', []),
        devices : new FormArray(),
    });
}

addDevice() {
    this.devices.push(new FormControl(''));
}

// Used to get a strongly typed FormControl
getDeviceByIndex(index: number): FormControl {
    return this.devices.at(index) as FormControl;
}

Then in your component.html you can replace

<input type="text" [formControl]="devices.controls[i]">

with the following

<input type="text" [formControl]="getDeviceByIndex(i)">

Source on StackOverflow