Puedes probar

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

o mi forma favorita personal de manejar formularios

 <div [formGroup]="inviceForm"> <!-- any tag that wraps all of your controls --> <!-- some input before (anything)--> <input class="form-control form-control-sm" type="number" min="0" formControlName='quantity'> <!-- some inputs after (anything)--> </div>

De esta documentación oficial y de acuerdo con la definición de FormControl , podemos ver que FormControl hereda de AbstractControl. Y dado que FormGroup.controls y FormGroup.get("key") ambos devuelven un AbstractControl , tuve que crear una función para pasar de la clase Parent a Child.

 toControl(absCtrl: AbstractControl): FormControl { const ctrl = absCtrl as FormControl; // if(!ctrl) throw; return ctrl; }

y la plantilla

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

PD: no pude usar FormControlName porque tengo muchos grupos de formularios y subgrupos/matrices. Eso es lo que tuve que usar la directiva banana in box, porque su valor está fuertemente tipado

Pude solucionar este problema dando a la plantilla acceso directo a FormControl y agregándola al formulario en initForm() .

.ts

 form: FormGroup = new FormGroup({}); quantity: FormControl = new FormControl(Quantity.MIN, [ Validators.min(Quantity.MIN), Validators.max(Quantity.MAX), ]); ngOnInit(): void { this.initForm(); } initForm(): void { this.form.addControl('quantity', this.quantity); }

.html (En mi caso, estoy pasando la cantidad de FormControl a un componente personalizado que toma una Entrada de FormControl Input() llamada "control").

 <form [formGroup]="form" (ngSubmit)="submit()"> <app-select-quantity [control]="quantity"></app-select-quantity> <div> <button mat-flat-button type="submit" color="primary" [disabled]="!form.valid" > Submit </button> </div> </form>

Este problema puede provenir de tsconfig.json si está usando Angular 9 o superior

 "angularCompilerOptions": { ... "strictTemplates": true <-- causing "Type 'AbstractControl' is not assignable to type 'FormControl'" }

Primera opción

configurando "strictTemplates": false podría "resolver" el problema temporalmente

Segunda opción

al convertir AbstractControl a FormControl a través de la plantilla, por lo que su archivo .ts debería tener

 convertToFormControl(absCtrl: AbstractControl | null): FormControl { const ctrl = absCtrl as FormControl; return ctrl; }

y tu html

 <input type="text" [formControl]="convertToFormControl(invoiceForm.get("quantity"))" />

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

Use la función $any para deshabilitar la verificación de tipos. Resolví mi error usando esto.

Si hay diferentes versiones o no hay coincidencias de conversión de 'tipo', puede usar 'cualquiera' como solución temporal. Por ejemplo

Desde :

 event: FormControl

Para :

 event: any

<input type="name" placeholder="Name" class="form-control" [formControl]="$any(cardForm).controls.name" />

Aquí $any función deshabilitaría la verificación de tipos.