Pas de fournisseur pour ControlContainer quand un composant enfant a un ngModelGroup

Question

Je n'arrive pas à comprendre, cela ne fonctionne tout simplement pas.

Il s'agit de l'original plongeur écrit par Pascal Prekht, qui explique les formulaires basés sur des modèles :

Et aquí est mon fork qui est exactement la même chose, sauf que j'essaie de charger un des fieldsets comme un composant enfant séparé.

Voici le code :

@Component({
  selector:'form-group-component',
  template:`
    <fieldset ngModelGroup="anotherAddress">
      <div>
        <label>Street2:</label>
        <input type="text" name="street2" ngModel>
      </div>

    </fieldset>

  `
})
export class FormGroupComponent{

}

@Component({
  selector: 'form-component',
  directives:[FormGroupComponent],
  template: `
    <form #form="ngForm">

      <form-group-component></form-group-component>  

      <fieldset ngModelGroup="address">
        <div>
          <label>Street:</label>
          <input type="text" name="street" ngModel>
        </div>
        <div>
          <label>Zip:</label>
          <input type="text" name="zip" ngModel>
        </div>
        <div>
          <label>City:</label>
          <input type="text" name="city" ngModel>
        </div>
      </fieldset>

    </form>
  `
})
export class FormComponent {

}

Ainsi, après avoir coupé l'un des feildsets et l'avoir chargé dans une directive séparée, il ne fonctionne plus !

Il y a quelques problèmes résolus, mais aucun d'entre eux ne fonctionne.

Le présent y Le présent

Answer 1

Je sais que c'est une vieille question. Mais quelqu'un pourrait la trouver utile à l'avenir. J'ai eu le même problème et il semblerait que l'erreur apparaisse lorsqu'un composant a une propriété <form> sans la balise formGroup et que le module importe ReactiveFormModule . Pour résoudre le problème, il faut donc s'assurer que tous les <form> Les étiquettes ont formGroup si leur module importe la directive ReactiveFormModule .

Answer 2

Si vous utilisez formulaires basés sur des modèles et disposent d'un sous-composante pour une partie du formulaire, et (enfin) veulent utiliser ngModelGroup en ce sens que sous-composante vous devez fournir Conteneur de contrôle à la vue.

Solution rapide :

• l'importation ControlContainer, NgForm dans le sous-composant : import { ControlContainer, NgForm } from '@angular/forms';
• les ajouter en tant que viewProviders dans le sous-composant @Component décorateur :

```

@Component({
  selector: 'sub-question',
  templateUrl: '...',
  styleUrls: ['...'],
  viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]
})

• dans un article remarquable d'Alexey Zuev : https://medium.com/@a.yurich.zuev/angular-nested-template-driven-form-4a3de2042475