Question

我有一个使用Angular 5的小型网络应用程序，突然之间我在浏览器控制台中收到了这个奇怪的错误消息：

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

之前没有发生，我不知道有任何改变。我不知道该消息试图告诉我什么。

这是form-group的组件模板，似乎无效：

<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-group的模板：

<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

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

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

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

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

Answer 2

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

Answer 3

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

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

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

Answer 4

事实证明，该错误与form没有绑定到formGroup无关，但我也将接收变量命名为formGroup。这让人感到困惑。

只需重命名此变量即可解决问题。现在没关系：

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

Answer 5

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

Answer 6

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

Answer 7

如果使用Angular CLI时仍然有人出现此错误，则我仅导入ReactiveFormsModule，然后我导入并注册了FormsModule以解决该错误。更改模块类时，我使用ng serve为应用程序提供服务，即使导入并注册了FormsModule之后，仍然出现错误。为了解决该错误，我不得不停止提供服务并重新开始以重新编译模块类。

Answer 8

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

Answer 9

所以对我而言，最终是因为我在顶层模块之一的导出部分中放入了“ ReactiveFormsModule”。

Answer 10

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

1）：我将组件包含在自己的模块中。我必须将特定模块导入app.module。那让我半途而废。

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

Answer 11

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

就我而言，我从另一个目录复制了一个组件目录，并且〜.component.scss中的SCSS导入相对于我从中复制的初始目录。

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

Answer 12

某种程度上，bootstrap类与angular冲突。

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

Answer 13

每次遇到此错误时，我都会犯错，即在我自己的组件之一中使用反应式表单并使用名为@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>

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

13 个答案:

错误：对@Input使用保留字

组件

使用

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

组件

使用

解决方案2：别名输入

组件

使用