角10严格模式: AbstractControl对FormControl

Question

我有一个自定义组件：

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

在这里，控制被定义为：

@Input() control: FormControl;

的用法：

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

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

错误：

角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

另一种方法是在输入中使用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不更改组件的方式

Answer 3

可以使用AbstractControl方法得到()与TypeScript类get函数组合访问控件：

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

然后，可以在模板中轻松地访问该控件：

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

这在关于反应形式的文档中进行了描述。

希望这能帮上忙！