Angular 5 : "No provider for ControlContainer"

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 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 以进行双向绑定(bind)以工作并拦截表单的提交。 通知组件至少在没有投诉的情况下工作。

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

编辑: 我被要求分享我的 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" 绑定(bind)到它.

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

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

Also make sure you have both the FormsModule and the ReactiveFormsModule added to your module imports.