web-dev-qa-db-fra.com

Angular 5: "Aucun fournisseur pour ControlContainer"

J'ai une petite application Web avec Angular 5 et tout à coup, je reçois ce message d'erreur étrange dans la console de mon navigateur:

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

Cela ne s’est pas produit auparavant et je ne suis au courant d’aucun changement. Et je n'ai aucune idée de ce que ce message essaie de me dire.

C'est le gabarit de composant de form-group qui semble invalide:

<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>

Et voici le modèle où je consomme un groupe de formulaires:

<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>

Je l'ai regardé pendant des heures, mais je ne trouve aucune erreur.

Je devrais mentionner que je n'utilise pas FormGroup d'Angular, mais ma propre solution (parce que je pensais que leur solution était trop complexe et qu'elle ne correspondait pas à mes besoins spécifiques). Pourrait-il y avoir une sorte de collision de noms? Bien sûr, dans le module app.module, j'ai importé le FormsModule pour une liaison bidirectionnelle afin de fonctionner et d'intercepter la soumission du formulaire . Le composant de notification fonctionne au moins sans réclamation.

Je serais très reconnaissant pour toute aide.

Edit: On m'a demandé de partager mon code TS.

Composant défaillant: 

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
}

Le type FormGroup est juste un tableau et le composant est simplement censé être un wrapper visuel . Il n'y a pas de services supplémentaires impliqués ou DI et sans ce composant, Angular compile correctement . (FormGroup est marqué comme facultatif car TS continuerait à se plaindre de ne pas l'initialiser, même s'il sera toujours initialisé à l'exécution)

Composant qui transmet la propriété:

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...
}

Edit: Pour répondre à la question de @ Andrei: Je n'ai aucun service ou fournisseur appelé ControlContainer. Je viens de trois petits services, aucun d'entre eux ne pose de problème. Autant que je sache, ControlContainer a quelque chose à voir avec DI, mais la documentation d'Angular sur ce sujet est assez mystifiante. 

angularangular5
4
Marvin H.

Il s'avère que l'erreur n'a rien à voir avec form n'étant pas lié à un formGroup, mais moi nommant la variable de réception aussi formGroup. Cela déroute le diable de Angular.

Il suffit de renommer cette variable pour résoudre le problème . Ça va maintenant: 

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

ControlContainer est une classe abstraite étendue par AbstractFormGroupDirective à l'intérieur de ReactiveFormsModule.

L'erreur est renvoyée si vous utilisez les éléments ReactiveFormsModule et <form>- sans FormGroup qui y est lié via [formGroup]="myForm".

Pour corriger cette erreur, vous devez créer une variable FormGroup et la lier à votre formulaire:

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

Donc pour moi, c'est parce que j'avais mis 'ReactiveFormsModule' dans la section des exportations de l'un de mes modules de niveau supérieur.

0
emirhosseini