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

Question

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

Answer 1

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

 [ngModelOptions]="{standalone: true}"
 

Answer 2

L'expansion sur @Avenir Çokaj réponse

Étant un novice même je ne comprenais pas le message d'erreur clairement au premier abord.

Ce que le message d'erreur indique que dans votre formGroup vous avez un élément qui n'est pas comptabilisée dans votre formControl. (Intentionnellement/Accidentellement)

Si vous avez l'intention de ne pas valider ce domaine, mais que vous voulez toujours utiliser le ngModel sur cet élément d'entrée s'il vous plaît ajouter le drapeau pour indiquer qu'il est un composant autonome sans besoin de validation, comme mentionné par @Avenir-dessus.

Answer 3

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

En bref, vous ne pouvez plus utiliser l'attribut name dans un formGroup et vous devez utiliser formControlName

Answer 4

n'acceptez pas lorsque vous écrivez formcontrolname Angular 2. 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 début <form> </form> par exemple: <form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.

Answer 5

 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>