Typescript 无法分配类型化的 FormGroup

Question

我有一个类型化的 FormGroup 和一个通用组件，该组件将 FormGroup 作为输入并处理错误。

这是我的 FormGroup 的样子：

  filterForm = new FormGroup({
    name: new FormControl<string>('', { validators: [Validators.required] }),
    authority: new FormControl<string>('')
  });

错误处理程序组件声明一个常规输入，其计算结果为

FormGroup<any>

:

@Input({ required: true }) form!: FormGroup;

现在，当我尝试将

filterForm

设置为错误处理程序的

form

输入时，我收到错误：

Type FormGroup<{ name: FormControl<string>; authority: FormControl<string>; }> is not assignable to type FormGroup<any>.
Types of property 'controls' are incompatible. [...]
Property 'name' is incompatible with index signature.
Type FormControl<string> is not assignable to type AbstractControl<any, any>.
Types have separate declarations of a private property '_parent'.

虽然我理解该错误，但我不知道如何解决此问题以及如何输入我的

@Input

以便我可以使用任何类型的 FormGroup 作为参数。我真正使用的是表单的全局无效状态和可索引的

controls

对象来检查各个字段错误，所以我不关心组件中表单的类型。

Answer 1

我不确定这是否是您所遇到的情况，但是当您的工作空间中存在多个 @Angular 版本/副本时，就会发生这种情况。

就我而言，我正在应用程序（my-app）中开发和引用我自己的库项目（my-lib），并且我的库正在使用自己的@Angular包，并且应用程序正在使用自己的@Angular包。

因为它们位于两个不同的位置，即使它们可以是完全相同的版本，编译器也会将它们视为不同的库。

解决方案是通过在应用程序的 tsconfig.json 文件中添加以下条目，将所有 @Angular 引用重定向到单个位置，告诉您的应用程序仅使用 @Angular 的一个版本/副本。

"compilerOptions": {
  "paths": {
    "@angular/*": [
      "./node_modules/@angular/*"
     ]
  }
}

我不确定这是否是您所遇到的情况，但我想我会分享，以防它对您有所帮助。