Question

Template error Type 'AbstractControl' is not assignable to type 'FormControl'

Why am I getting this error?

The following code works in another application

          <input class="form-control form-control-sm" type="number" min="0"
            [formControl]='invoiceForm.get("quantity")'>

in this new application it works too but still complaining in the terminal

  Type 'AbstractControl' is not assignable to type 'FormControl'.
 46  50648  46
1 Jan 1970

Solution

 43
<input type="password" placeholder="Confirm Password" class="form-control" [formControl]="$any(myForm).controls['confirmpassword']"/> 

Use the $any function to disable type checking. I resolved my error by using this.

2021-08-02

Solution

 37

If someone else still have this issue, I share my solution, which is almost the same as Bellash was described but with better perfomance. For this example:

<input class="form-control form-control-sm" type="number" min="0"
        [formControl]='invoiceForm.get("quantity")' | formControl>

we just need to create and use pipe which will return for us value with correct type

@Pipe({
    name: 'formControl',
})
export class FormControlPipe implements PipeTransform {
    transform(value: AbstractControl): FormControl<typeof value['value']> {
        return value as FormControl<typeof value['value']>;
    }
}

In this way you will have better perfomance since pipe transform function will be called only when provided form will be changed.

Generally it is bad practice to use functions in templates, because this functions will be called on each lifecycle change, and will have big perfomance issues on bigger projects. The best way is to use pipes, which generally was developed exactly for such purposes, to transform some values on rendering only when this will be changed. Hope this will help someone)

2022-06-06