web-dev-qa-db-fra.com

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

Après la mise à niveau vers RC5, nous avons commencé à avoir 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 puissent plus être utilisés ensemble, mais je ne pouvais pas 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>
angularangular2-formsangular2-formbuilder
48
user2363245

La réponse est exacte dans le message d'erreur, vous devez indiquer qu'il est autonome et qu'il n'entre donc pas en conflit avec les commandes de formulaire

[ngModelOptions]="{standalone: true}"
96
Avenir Çokaj

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

En tant que novice, je n'ai pas compris le message d'erreur clairement au début.

Le message d'erreur indique que, dans votre groupe formG, vous avez un élément qui n'est pas comptabilisé dans votre formulaireControl. (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, ajoutez le drapeau pour indiquer qu'il s'agit d'un composant autonome sans nécessiter de validation, comme mentionné par @Avenir plus haut.

19
saNiks

OK, enfin, ça marche: voir https://github.com/angular/angular/pull/10314#issuecomment-242218563

En bref, vous ne pouvez plus utiliser l'attribut name dans une formGroup et vous devez utiliser formControlName à la place.

10
user2363245

lorsque vous écrivez formcontrolname Angular 2, n'acceptez pas. Vous devez écrire formControlName . il s'agit de seconds 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 (myObject).

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

7
ethemsulan

import { FormControl, FormGroup, AbstractControl, FormBuilder, Validators } from '@angular/forms';


    this.userInfoForm = new FormGroup({
      userInfoUserName: new FormControl({ value: '' }, Validators.compose([Validators.required])),
      userInfoName: new FormControl({ value: '' }, Validators.compose([Validators.required])),
      userInfoSurName: new FormControl({ value: '' }, Validators.compose([Validators.required]))
    });
<form [formGroup]="userInfoForm" class="form-horizontal">
            <div class="form-group">
                <label class="control-label"><i>*</i> User Name</label>
                    <input type="text" formControlName="userInfoUserName" class="form-control" [(ngModel)]="userInfo.userName">
            </div>
            <div class="form-group">
                <label class="control-label"><i>*</i> Name</label>
                    <input type="text" formControlName="userInfoName" class="form-control" [(ngModel)]="userInfo.name">
            </div>
            <div class="form-group">
                <label class="control-label"><i>*</i> Surname</label>
                    <input type="text" formControlName="userInfoSurName" class="form-control" [(ngModel)]="userInfo.surName">
            </div>
</form>

2
barış çıracı

Si le composant a plus d'une forme, enregistrez tous les contrôles et toutes les formes

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

Le problème était que j'avais 2 formulaires dans un composant et que le second formulaire n'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é la rédaction complète des deux formulaires sans laisser une entrée non enregistrée qui résolve le problème.

1
Rust

Je viens de recevoir cette erreur parce que je n'ai pas inclus tous mes contrôles de formulaire dans une variable div avec un attribut formGroup.

Par exemple, cela jettera une erreur

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

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

1
Stephen Paul

Si vous souhaitez utiliser [formGroup] avec formControlName, vous devez remplacer name attribut par formControlNameformControlName.

Exemple: 

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

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

vous devez remplacer name attribut par formControlNameformControlName et cela fonctionnera normalement comme suit:

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

0
SANA Abdoul Aziz