Угловое 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/[email protected]: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 для двусторонней привязки для работы и перехвата формы submit. Компонент уведомления, по крайней мере, работает без жалоб.

Я был бы очень благодарен за любую помощь.

Изменить: меня попросили поделиться своим 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 и без этого компонента Угловые компиляции просто прекрасны. (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, но угловая документация по этой теме довольно мистифицирует.

ОТВЕТЫ

Ответ 1

ControlContainer является абстрактным классом, который расширяется с помощью AbstractFormGroupDirective внутри ReactiveFormsModule.

Ошибка возникает, если вы используете ReactiveFormsModule и <form> -element без FormGroup связанного с ним через [formGroup]="myForm".

Чтобы исправить эту ошибку, вам необходимо создать FormGroup и привязать ее к вашей форме:

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

Ответ 2

Для меня получается, что я импортировал только ReactiveFormsModule, но не FormsModule. вам нужно импортировать оба.

Ответ 3

Оказывается, что ошибка не имеет ничего общего с form не связанной с formGroup, но я formGroup принимающую переменную также formGroup. Это смущает черт из Углового.

Просто переименование этой переменной решает проблему. Теперь все в порядке:

<form class="container" (ngSubmit)="update()">
 <app-form-group [fg]="additionalInformation"></app-form-group>
 <button type="submit" class="btn btn-primary">Submit</button>
</form>

Ответ 4

Если вы не зарегистрировали свой компонент в модуле приложения, это означает, что вы должны импортировать ReactiveFormsModule в этот модуль компонента.

Ответ 5

Так что для меня все закончилось тем, что я поместил "ReactiveFormsModule" в разделе экспорта в одном из моих модулей верхнего уровня.

Ответ 6

Я смог решить это с двумя изменениями.

1) У меня был свой компонент в своем собственном модуле. Мне пришлось импортировать этот конкретный модуль в app.module. Это дало мне половину пути к решению.

2) У меня также были некоторые поля, значения которых были сгенерированы в компоненте и отображены в группе форм. Как только я вынул их из группы форм и поместил их в отдельный div, я был готов идти.