web-dev-qa-db-ja.com

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

それは以前は起こらなかったし、私が行った変更を認識していません。そして、私はそのメッセージが私に何を伝えようとしているのか分かりません。

これは、フォームグループのコンポーネントテンプレートであり、何らかの理由で無効になっているようです。

<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をインポートしました。通知コンポーネントは、少なくとも苦情なしで機能します。

私はどんな助けにもとてもうれしいです。

編集： 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というサービスまたはプロバイダーがありません。私には3つの小さなサービスがありますが、どれも問題を引き起こすことはありません。私が知る限り、ControlContainerはDIと関係がありますが、そのトピックに関するAngularのドキュメントはかなり不可解です。

angularangular5
20
Marvin H.

ControlContainerは、AbstractFormGroupDirective内のReactiveFormsModuleによって拡張される抽象クラスです。

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

このエラーを修正するには、FormGroupを作成してフォームにバインドする必要があります。

<form class="container" [formGroup]="myForm" (ngSubmit)="update()">
51
cyr-x

私にとっては、FormsModuleではなくReactiveFormsModuleだけをインポートしたことがわかりました。両方をインポートする必要があります。

29
Manav Kothari

エラーは、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>
4
Marvin H.

アプリモジュールにコンポーネントを登録しなかった場合、そのコンポーネントのモジュールにReactiveFormsModuleをインポートする必要があります。

1
Dictech Inc

だから私にとっては、トップレベルのモジュールのいずれかのエクスポートセクションに「ReactiveFormsModule」を入れていたからです。

0
emirhosseini

これを2つの変更で解決できました。

1）独自のモジュールにコンポーネントがありました。特定のモジュールをapp.moduleにインポートする必要がありました。それで解決策が半分になりました。

2）コンポーネントで値が生成され、フォームグループに表示されるフィールドもありました。それらをフォームグループから取り出して別のdivに入れると、次に行く準備が整いました。

0
Forrest