Angular 10 strict mode: AbstractControl vs FormControl

Question

I have this custom component :

<my-component [control]="..."></my-component>

Here, control is defined as :

@Input() control: FormControl;

Usage of my-component :

this.myFormGroup = new FormGroup({
    name: new FormControl('')
});

<my-component [control]="myFormGroup.controls.name"></my-component>

The Error:

Angular 10 strict mode complains about "myFormGroup.controls.name" not being a FormControl.

"controls" is defined in FormGroup as an object where every field is of type AbstractControl :

// forms.d.ts
export declare class FormGroup extends AbstractControl {
    controls: {
        [key: string]: AbstractControl;
    };
    // ....
}

This code would work at runtime but doesn't compile.

What would be the best way to solve this?

Answer 1

I've avoided this in the past by keeping a reference to the form control outside of the form group.

Eg:

this.nameControl = new FormControl()
this.myFormGroup = new FormGroup({
    name: this.nameControl,
});