Angular 10 严格模式：AbstractControl 与 FormControl答案

【问题标题】：Angular 10 strict mode: AbstractControl vs FormControlAngular 10 严格模式：AbstractControl 与 FormControl
【发布时间】：2020-06-30 17:19:49
【问题描述】：

我有这个自定义组件：

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

这里，控制定义为：

@Input() control: FormControl;

my-component 的使用：

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;
    };
    // ....
}

这段代码可以在运行时工作，但不能编译。

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

【问题讨论】：

我知道严格模式应该是更好的做事方式，但解决非常简单的操作，如答案所暗示的对我来说似乎真的很hacky。有谁知道 Angular 官方是如何推荐这样做的？

标签： angular angular-reactive-forms

【解决方案1】：

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

例如：

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

【讨论】：

【解决方案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 的方式不改变你的组件

【讨论】：

【解决方案3】：

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

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

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

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

这在Reactive Forms的文档中有描述

希望对您有所帮助！

【讨论】：

这可行，但我不喜欢在每个更改检测周期中调用模板内的方法的想法。还有this的解决方案，它使用管道，应该更高效。
@Wolf359 当然你可以在技术上使用管道，但你不是在处理诸如字符串、数字等原始值。FormControl 不是一个纯粹的、简单的值。类似于您不应该使用管道进行过滤/排序，因为也不是纯粹的。这来自官方 Angular 文档。