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)