ngModel ne peut pas être utilisé pour enregistrer des contrôles de formulaire avec une directive formGroup parente

Après la mise à niveau vers RC5, nous avons commencé à recevoir cette erreur:

ngModel cannot be used to register form controls with a parent formGroup 
 directive.
Try using formGroup's partner directive "formControlName" instead.  Example:

    <div [formGroup]="myGroup">
      <input formControlName="firstName">
    </div>

    In your class:

    this.myGroup = new FormGroup({
       firstName: new FormControl()
    });

      Or, if you'd like to avoid registering this form control,
 indicate that it's standalone in ngModelOptions:

      Example:

      
  <div [formGroup]="myGroup">
     <input formControlName="firstName">
     <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
  </div>

Il semble que dans RC5, les deux ne peuvent plus être utilisés ensemble, mais je n'ai pas pu trouver de solution alternative.

Voici le composant produisant l'exception:

    <select class="field form-control" [formGroup]="form" [(ngModel)]="cause.id" [name]="name">
    <option *ngFor="let c of causes" [value]="c.text">{{c.text}}</option>
    </select>

La réponse est juste sur le message d'erreur, vous devez indiquer qu'il est autonome et qu'il n'est donc pas en conflit avec les contrôles de formulaire:

[ngModelOptions]="{standalone: true}"

Développement de la réponse de @Avenir Çokaj

Étant novice même, je n'ai pas compris clairement le message d'erreur au début.

Ce que le message d'erreur indique, c'est que dans votre formGroup vous avez un élément qui n'est pas pris en compte dans votre formControl. (Intentionnellement / accidentellement)

Si vous avez l'intention de ne pas valider ce champ mais que vous souhaitez tout de même utiliser le ngModel sur cet élément d'entrée, veuillez ajouter l'indicateur pour indiquer qu'il s'agit d'un composant autonome sans avoir besoin de validation comme mentionné par @Avenir ci-dessus.

OK, enfin cela fonctionne: voir https://github.com/angular/angular/pull/10314#issuecomment-242218563

En bref, vous ne pouvez plus utiliser d' nameattribut dans un formGroup, et devez utiliser à la formControlNameplace

lorsque vous écrivez formcontrolname Angular 2 n'accepte pas. Vous devez écrire formControlName . il s'agit de deuxièmes mots en majuscules.

<input type="number" [(ngModel)]="myObject.name" formcontrolname="nameFormControl"/>

si l'erreur persiste, essayez de définir le contrôle de formulaire pour tout le champ objet (monObjet).

entre début <form> </form>par exemple:<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.

Si le composant a plus d'un formulaire, enregistrez tous les contrôles et formulaires

J'avais besoin de savoir pourquoi cela se produisait dans un certain composant et pas dans un autre composant.

Le problème était que j'avais 2 formulaires dans un composant et que le second formulaire ne l'avait pas encore [formGroup]et n'était pas encore enregistré car je construisais encore les formulaires.

Je suis allé de l'avant et j'ai terminé l'écriture des deux formulaires complets sans laisser une entrée non enregistrée qui résout le problème.

Je viens de recevoir cette erreur car je n'ai pas inclus tous mes contrôles de formulaire dans un divavec un formGroupattribut.

Par exemple, cela lancera une erreur

<div [formGroup]='formGroup'>
</div>
<input formControlName='userName' />

Cela peut être assez facile à manquer si c'est une forme particulièrement longue.

Si vous souhaitez utiliser [formGroup]avec formControlName, vous devez remplacer l' nameattribut par formControlNameformControlName.

Exemple:

Cela ne fonctionne pas car il utilise l' attribut [formGroup]et name.

<div [formGroup]="myGroup">
   <input name="firstName" [(ngModel)]="firstName">
</div>

Vous devez remplacer l' nameattribut par formControlNameet cela fonctionnera bien comme ceci:

<div [formGroup]="myGroup">
   <input formControlName="firstName" [(ngModel)]="firstName">
</div>

Il semble que vous utilisez ngModel sur le même champ de formulaire que formControlName. La prise en charge de l'utilisation de la propriété d'entrée ngModel et de l'événement ngModelChange avec des directives de formulaire réactif a été déconseillée dans Angular v6 et sera supprimée dans Angular v7

Cette erreur apparaît lorsque vous avez des contrôles de formulaire (tels que des entrées, des sélections, etc.) dans vos balises de groupe de formulaires sans propriété formControlName.

Ces exemples jettent l'erreur:

<form [formGroup]="myform">
    <input type="text">
    <input type="text" [ngmodel]="nameProperty">
    <input type="text" [formGroup]="myform" [name]="name">
</fom>

Il y a deux façons, le stand alone:

<form [formGroup]="myform">
    <input type="text" [ngModelOptions]="{standalone: true}">
    <input type="text" [ngmodel]="nameProperty" [ngModelOptions]="{standalone: true}">
    <!-- input type="text" [formGroup]="myform" [name]="name" --> <!-- no works with standalone --
</form>

Ou en l'incluant dans le groupe de formulaires

<form [formGroup]="myform">
    <input type="text" formControlName="field1">
    <input type="text" formControlName="nameProperty">
    <input type="text" formControlName="name">
</fom>

Le dernier implique de les définir dans le formulaire d'initialisation

this.myForm =  new FormGroup({
    field1: new FormControl(''),
    nameProperty: new FormControl(''),
    name: new FormControl('')
});