将 Angular Material 的芯片组件集成到我的表单中时出错

Question

我想将芯片组件包含在我的表单组件中。 为此，我使用 Angular Material 的芯片。

https://material.angular.io/components/chips/examples#chips-form-control

出现错误： 输入“AbstractControl |” null' 不可分配给类型'FormControl'。 类型“null”不可分配给类型“FormControl”。

我不知道我必须做些什么不同的事情。我按照说明做了。 https://stackoverflow.com/a/54136348/19648465

有人可以帮助我吗？

代码如下： https://stackblitz.com/edit/stackblitz-starters-6lpefu?file=src%2Fapp%2Fform%2Fform.component.html

Answer 1

您需要对其进行类型转换，默认情况下所有表单控件和组都是抽象控件。

在form.component中添加一个函数如下

  public get formControl () {
    return this.form.get("subTasks") as FormControl;
  }

并更改你的html如下

...
  <app-chip [control]="formControl"></app-chip>
...

这应该会为您编译代码。检查您使用的 Angular 版本，然后在版本下拉列表中选择该版本，如下所示，然后根据说明使用。