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

Answer 2

Another aproach is use a setter in input. In your component(*)

  control:FormControl //declare a variable
  @Input('control') set _control(value:AbstractControl) //<--here expect an AbstracControl
  {
    this.control=value as FormControl
  }

A fool example in stackblitz

(*) I choose the way @Input('control') set anyfunctionName to not change your component

Answer 3

You can use AbstractControl method get() to access a control in combination with a TypeScript class get function:

get name() {
  return this.myFormGroup.get('name') as FormControl
}

You can then access the control easily in templates:

<div>{name.value} {name.valid}</div>

This is described in the documentation on Reactive Forms

Hopefully that helps!