Question

我有这个自定义组件：

<my-component [control]="..."></my-component>

此处，控件定义为：

@Input() control: FormControl;

我的组件的用法：

this.myFormGroup = new FormGroup({
    name: new FormControl('')
});

<my-component [control]="myFormGroup.controls.name"></my-component>

错误：

Angular 10严格模式抱怨“ myFormGroup.controls.name”不是FormControl。

“控件”在FormGroup中定义为一个对象，其中每个字段的类型均为AbstractControl：

// forms.d.ts
export declare class FormGroup extends AbstractControl {
    controls: {
        [key: string]: AbstractControl;
    };
    // ....
}

此代码可在运行时运行，但无法编译。

解决这个问题的最佳方法是什么？

Answer 1

过去，我通过保留对表单组之外的表单控件的引用来避免这种情况。

例如：

this.nameControl = new FormControl()
this.myFormGroup = new FormGroup({
    name: this.nameControl,
});

Answer 2

您可以使用AbstractControl方法get()来访问与TypeScript类get函数结合使用的控件：

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

然后您可以在模板中轻松访问控件：

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

Reactive Forms上的文档中对此进行了描述

希望有帮助！

Answer 3

另一个方法是在输入中使用setter。在您的组件中（*）

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

stackblitz

中的一个愚人示例

（*）我选择了@Input('control') set anyfunctionName不更改组件的方式

Angular 10严格模式：AbstractControl与FormControl

3 个答案: