Angular 5：“没有 ControlContainer 的提供者”

Question

我有一个带有 Angular 5 的小型 Web 应用程序，突然我在浏览器控制台中收到一条奇怪的错误消息：

ncaught Error: Template parse errors:
No provider for ControlContainer ("
</p>
<form class="container" (ngSubmit)="update()">
  [ERROR ->]<app-form-group-component 
[formGroup]="additionalInformation"></app-form-group-component>
      <button "): ng:///AppModule/KickoffComponent.html@4:2

以前没有发生过这种情况，我不知道有任何更改。而且我不知道该消息试图告诉我什么。

这是表单组的组件模板，它似乎以某种方式无效：

<div *ngFor='let e of formGroup' class="form-group">
<label for="{{e.key}}">{{e.label}}</label>
<input type="{{e.type}}" name="{{e.key}}" 
[(ngModel)]="e.value" class="form-control" 
[ngClass]='{"is-valid": e.valid === true && e.required === true}'
        />
    </div>

这是我使用表单组的模板：

<form class="container" (ngSubmit)="update()">
 <app-form-group-component [formGroup]="additionalInformation"></app-form-group-component>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
<app-notification [notification]="notification"></app-notification>

我盯着它看了好几个小时，但我找不到任何错误。

我应该提一下，我不使用 Angular 的 FormGroup，而是使用我自己的解决方案（因为我认为他们的设计过度，并且不符合我的特定需求）。会不会有某种名称冲突？当然，在 app.module 中，我已经导入了 FormsModule 以进行双向绑定以工作并拦截表单的提交。 通知组件至少可以毫无怨言地工作。

如果有任何帮助，我将不胜感激。

编辑： 我被要求分享我的 TS 代码。

失败的组件：

import { Component, Input } from '@angular/core';
import { FormGroup } from '../../models/form-group';

@Component({
  selector: 'app-form-group-component',
  templateUrl: './form-group.component.html',
})
export class FormGroupComponent {
  @Input() formGroup?: FormGroup
}

FormGroup 类型只是一个数组，组件只是一个可视化包装器。 没有涉及其他服务或 DI，并且没有该组件，Angular 编译得很好。 （formGroup 被标记为可选，因为 TS 会一直抱怨它没有被初始化，尽管在运行时它总是会被初始化）

传递属性的组件：

import { Component, OnInit } from "@angular/core";
import { additionalInformation } from "./additional-information";
import { basicInformation } from "./basic-information";
...

@Component({
  selector: "app-kickoff",
  templateUrl: "./kickoff.component.html",
})
export class KickoffComponent implements OnInit {
  basicInformation: FormGroup = basicInformation;
  additionalInformation: FormGroup = additionalInformation;
  methods...
}

编辑：回答@Andrei 的问题：我没有名为ControlContainer 的服务或提供者。我只有三个小服务，它们都不会造成任何麻烦。据我所知，ControlContainer 与 DI 有关，但 Angular 关于该主题的文档相当神秘。

Answer 1

我在 Angular 9 中遇到了同样的问题。唯一有帮助的解决方案是从构造函数的依赖声明中删除 @Host ()。 Angular 新渲染引擎Ivy doesn't like @Host() decorator.

Answer 2

每次遇到此错误时，我都会错误地使用响应式表单并在我自己的组件中使用名为 @Input formGroup 的输入。

错误：使用 @Input 的保留字

组件

@Input()
formGroup: FormGroup;

使用它

<!-- Angular now thinks this is a form which causes the error -->
<my-own-component [formGroup]="formGroup"></my-own-component>

解决方案 1：为@Input 使用其他词

组件

@Input()
form: FormGroup;

使用它

<!-- This works -->
<my-own-component [form]="formGroup"></my-own-component>

解决方案 2：别名输入

组件

@Input("form")
formGroup: FormGroup;

使用它

<!-- This works too -->
<my-own-component [form]="formGroup"></my-own-component>

Answer 3

如果有人在使用 Angular CLI 时仍然遇到此错误，我只导入了 ReactiveFormsModule，然后我导入并注册了 FormsModule 以修复错误。当我对模块类进行更改时，我正在使用ng serve 为应用程序提供服务，即使在导入和注册FormsModule 之后我仍然遇到错误。为了解决这个错误，我不得不停止服务并重新开始以重新编译模块类。

Answer 4

ControlContainer 是一个抽象类，由ReactiveFormsModule 内部的AbstractFormGroupDirective 扩展。

如果您使用ReactiveFormsModule 和<form> 元素而没有通过[formGroup]="myForm" 绑定到它的FormGroup，则会引发错误。

要修复此错误，您必须创建一个 FormGroup 并将其绑定到您的表单：

<form class="container" [formGroup]="myForm" (ngSubmit)="update()">

还要确保将 FormsModule 和 ReactiveFormsModule 添加到模块导入中。

Answer 5

不知何故，引导类与角度冲突。

我必须使用引导类删除顶级 div。

Answer 6

对于我（以及那些创建 TAB 应用程序的人），事实证明我必须在 tab1.module.ts 中添加 FormsModule 和 ReactiveFormsModule 的导入。我没有找到这种类型的 senario 的其他答案，所以我想我会分享它。

Answer 7

以防万一有人对此仍有疑问。我遇到了同样的错误。但是，它与导入 ReactiveFormsModule 或 FormsModule 无关。

在我的例子中，我从不同的目录复制了一个组件目录，我在 ~.component.scss 中的 SCSS 导入与我从中复制的初始目录相关。

该错误并不表明是这种情况，最终考虑检查其他组件文件花了一点时间。杜！

Answer 8

当您在模块中导入 ReactiveFormsModule 并缺少 FormsModule 时，会发生此问题。所以我们需要将它导入到你的组件所属的模块中

import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    ReactiveFormsModule,
    FormsModule
  ]
})
export class XXXModule { }

Answer 9

如果没有在您的应用模块中注册您的组件，则意味着您必须在该组件的模块中导入 ReactiveFormsModule。

Answer 10

我能够通过两个更改来解决这个问题。

1) 我的组件在它自己的模块中。我不得不将那个特定的模块导入到 app.module 中。这让我获得了一半的解决方案。

2) 我还有一些字段的值是在组件中生成并显示在表单组中的。一旦我将它们从表单组中取出并将它们放在单独的 div 中，我就可以开始了。

Answer 11

对我来说，事实证明我只导入了 ReactiveFormsModule 而不是 FormsModule。 您需要同时导入两者。

Answer 12

所以对我来说，这最终是因为我将“ReactiveFormsModule”放在了我的顶级模块之一的导出部分中。

Answer 13

原来错误与form 没有绑定到formGroup 无关，但我也将接收变量命名为formGroup。这让 Angular 感到困惑。

只需重命名此变量即可解决问题。 现在可以了：

<form class="container" (ngSubmit)="update()">
 <app-form-group [fg]="additionalInformation"></app-form-group>
 <button type="submit" class="btn btn-primary">Submit</button>
</form>