角度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

这种情况以前从未发生过，我也不知道有任何变化。我完全不知道那条信息想告诉我什么。

这是表单组的组件模板，它似乎是无效的:

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

类型 表格组只是一个 Array，组件只是一个可视化包装器。 没有额外的服务涉及或 DI，没有这个组件，角度编译只是好。 (表格组别被标记为可选，因为 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 关于这个主题的文档相当令人费解。

114336 次浏览
小开
最佳答案

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

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

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

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

还要确保在模块导入中同时添加了 FormsModule和 ReactiveFormsModule。

小开

原来这个错误与 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>
小开

因此，对我来说，最终的结果是因为我在我的一个顶级模块的导出部分中放置了“ ReactiveFormsModule”。

小开

对我来说，我只导入了 ReactiveFormsModule，而没有导入 FormsModule。 你需要两者都进口。

小开

我通过两个改变解决了这个问题。

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

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

小开

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

小开

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

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


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

以防还有人对这个有意见。我也遇到了同样的错误。但是，导入 ReactiveFormsModule 或 FormsModule 与此无关。

在我的例子中，我从一个不同的目录复制了一个组件目录，我的 SCSS 导入到 ~ 中。Scss 相对于我从中复制的初始目录。

这个错误并没有表明情况就是这样，而且花了太长的时间才最终考虑检查其他组件文件。杜尔！

小开

对于我(以及那些创建 TAB应用程序的人) ，我必须在 表1. 模块中添加 FormsModule 和 ReactiveFormsModule 的导入。对于这种情况，我没有找到其他的答案，所以我想我应该分享一下。

小开

不知何故，自举类是矛盾的角。

我必须删除带引导类的顶级 div。

小开

如果有人仍然有这个错误，而使用角 CLI，我只是导入的 ReactiveFormsModule，然后我导入和注册的 FormsModule来修复这个错误。当我修改模块类时，我正在使用 ng serve服务应用程序，即使导入并注册了 FormsModule，我仍然有错误。为了修复错误，我不得不停止服务并重新开始，以便重新编译模块类。

小开

每次遇到这个错误时，我都会犯一个错误，在我自己的组件中使用反应形式和名为 @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>
小开

我在角度9上也遇到了同样的问题。唯一有帮助的解决方案是从构造函数中的依赖项声明中删除 @Host ()。新型角度渲染引擎 Ivy 不喜欢 @Host()室内设计师。


提交答案