Angular 角度5:“；没有ControlContainer的提供程序“；

我有一个带有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

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关于该主题的文档相当神秘。

ControlContainer是一个抽象类，由

ReactiveFormsModule

中的

AbstractFormGroupDirective

扩展

如果您使用的是

ReactiveFormsModule

和

-元素，而该元素没有通过

[FormGroup]=“myForm”

绑定到

FormGroup

，则会引发错误

要修复此错误，您必须创建一个

FormGroup

，并将其绑定到表单：

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

另外，请确保已将

FormsModule

和

ReactiveFormsModule

添加到模块导入中

---

结果表明，该错误与

表单

未绑定到

表单组

无关，而是我将接收变量命名为

表单组

。这让我很困惑

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

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

提交

所以对我来说，这是因为我在一个顶级模块的导出部分中添加了“ReactiveFormsModule”。

对我来说，结果是我只导入了ReactiveFormsModule，而没有导入FormsModule。

---

您需要同时导入这两个文件。

我可以通过两个更改来解决此问题

1）我的组件在自己的模块中。我必须将特定模块导入app.module。这让我找到了解决办法的一半

---

2）我还有一些字段，其值在组件中生成，并显示在表单组中。一旦我把它们从表格组中拿出来，放在一个单独的分区中，然后我就准备走了

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

当您导入

ReactiveFormsModule

且模块中缺少

FormsModule

时，会发生此问题。因此，我们需要将其导入组件所属的模块

从'@angular/forms'导入{ReactiveFormsModule，FormsModule}；
@NGD模块({
声明：[
...
],
进口：[
...
反应形式模块，
FormsModule
]
})
导出类XXXModule{}

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

在我的例子中，我从另一个目录复制了一个组件目录，并且~.component.SCSS中的SCSS导入是相对于我从中复制的初始目录的

---

错误并没有说明这是事实，而且花了太长时间才最终考虑检查其他组件文件。杜尔

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

不知何故，引导类与angular冲突

---

我必须用bootstrap类删除顶级div。

如果有人在使用Angular CLI时仍有此错误，我只是导入了

ReactiveFormsModule

，然后导入并注册了

FormsModule

，以修复此错误。当我对模块类进行更改时，我正在使用

ng serve

为应用程序提供服务，即使导入并注册了

FormsModule

，我仍然存在错误。为了修复此错误，我必须停止服务并重新启动，以便重新编译模块类。

每次遇到此错误，我都会犯错误，使用被动表单并在我自己的一个组件中使用名为

@input formGroup

的输入

错误：为@Input使用保留字 组成部分

@Input（）
formGroup:formGroup；

使用它

解决方案1：对@Input使用其他单词 组成部分

@Input（）
表格：表格组；

使用它

解决方案2：为输入设置别名 组成部分

@Input（“表单”）
formGroup:formGroup；

使用它

我在Angular 9上遇到了同样的问题。唯一有帮助的解决方案是从构造函数中的依赖项声明中删除

@Host（）

。Angular是一个新的渲染引擎。

你能分享一下你的ts代码吗？恐怕这里的代码太少了，无法解释这个问题。Angular抱怨有人请求一个ControlContainer类型的提供者（服务），但在任何注入器中都找不到。这是您定义的服务吗？注射在哪里？它是哪个模块的一部分？它是否声明为提供程序？我认为将输入命名为angular forms指令通常是一个坏主意，即使它不会引起冲突。通过基本信息和组件内的其他信息来更改myForm。ts带有：基本信息=新表单组=基本信息；事件如果我这样做，错误仍然存在。因此，我将ReactiveFormsModule和FormsModule添加到组件的模块导入中，并且它可以正常工作。即使您想将表单元素纯粹用于d

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

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

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