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

之前没有发生这种情况,我不知道有任何改变.我不知道那条消息试图告诉我什么.

这是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>-element而没有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未绑定到a 无关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>