[解決済み] Angular 5："ControlContainerのプロバイダがありません"

質問

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 をインポートし、フォームの送信をインターセプトしています。 notification-componentは、少なくとも不満なく動作しています。

ご教示いただければ幸いです。

編集する 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
}

タイプ フォームグループ は単なる配列であり、コンポーネントは単に視覚的なラッパーであることを意味します。 追加のサービスやDIはなく、このコンポーネントがなくてもAngularは問題なくコンパイルできます。 ( フォームグループ はオプションとマークされていますが、これは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というサービスやプロバイダは持っていません。3つの小さなサービスを持っているだけで、どれも問題を起こすことはありません。私の知る限り、ControlContainerはDIと関係があるようですが、このトピックに関するAngularのドキュメントはかなり不可解です。

どうやって解決するの？

その ControlContainer は抽象クラスで、これを拡張したものが AbstractFormGroupDirective の内部で ReactiveFormsModule .

を使用している場合、エラーがスローされます。 ReactiveFormsModule と <form> -要素で、かつ FormGroup を介してバインドされています。 [formGroup]="myForm" .

このエラーを修正するためには FormGroup を作成し、フォームにバインドしてください。

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

また FormsModule と ReactiveFormsModule をモジュールのインポートに追加してください。