Question

为什么我会收到此错误？

以下代码适用于另一个应用程序

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

在这个新应用程序中它也可以工作，但仍然在终端中抱怨

  Type 'AbstractControl' is not assignable to type 'FormControl'.

Answer 1

你可以试试

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

或者我个人最喜欢的处理表单的方式

<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>

Answer 2

从这个official documentation，根据FormControl definition，我们可以看到FormControl继承自AbstractControl。由于 Person 和 FormGroup.controls 都返回 FormGroup.get("key")，我必须创建一个函数来从父类转换为子类。

AbstractControl

和模板

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

PS：我不能使用 <input class="form-control form-control-sm" type="number" min="0" [formControl]='toControl(invoiceForm.get("quantity"))'>，因为我有很多表单组和子组/数组。那是我必须在 box 指令中使用香蕉，因为它的值是强类型的

Answer 3

通过让模板直接访问 FormControl 并将其添加到 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（在我的例子中，我将 FormControl 数量传递给一个自定义组件，该组件采用名为“control”的 FormControl Input()。）

<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>

Answer 4

如果您使用的是 Angular 9 或更高版本，此问题可能来自 tsconfig.json

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

首选

通过设置 "strictTemplates": true 可能会暂时“解决”问题

第二个选项

通过模板将 AbstractControl 转换为 FormControl，因此您的 .ts 文件应该具有

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

和你的html

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

Answer 5

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

使用 $any 函数禁用类型检查。我用这个解决了我的错误。

模板错误类型“AbstractControl”不可分配给类型“FormControl”

5 个答案: