ngModel ne peut pas être utilisé pour enregistrer les contrôles de formulaires avec une directive de groupe de formulaires parent
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 une solution alternative.
voici le composant qui produit 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>
6 réponses
La réponse est juste sur le message d'erreur, vous devez indiquer qu'il est autonome et donc qu'il n'entre pas en conflit avec les contrôles de forme:
[ngModelOptions]="{standalone: true}"
développer la réponse de @Avenir Çokaj
être novice même si je n'ai pas compris le message d'erreur clairement au début.
ce que le message d'erreur indique est que dans votre formGroup vous avez un élément qui n'est pas comptabilisé dans votre formControl. (Intentionnellement/Accidentellement)
si vous avez l'intention de ne pas valider ce champ mais que vous voulez quand même utiliser le ngModel sur cet élément d'entrée, veuillez ajouter le drapeau pour indiquer que c'est un composant autonome sans besoin de validation, comme mentionné par @Avenir-dessus.
OK, a finalement obtenu ce travail: voir https://github.com/angular/angular/pull/10314#issuecomment-242218563
En bref, vous ne pouvez plus utiliser name attribut dans un formGroup, et doit utiliser formControlName au lieu de
lorsque vous écrivez formcontrolname angulaire 2 n'accepte pas. Vous devez écrire formControlName . il s'agit de majuscules deuxièmes mots.
<input type="number" [(ngModel)]="myObject.name" formcontrolname="nameFormControl"/>
si l'erreur persiste, essayez de définir le contrôle de forme pour tout le champ object(myObject).
entre le début <form> </form> par exemple: <form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.
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>si la composante a plus d'un formulaire, inscrire tous les contrôles et formulaires
j'avais besoin de savoir pourquoi cela se produisait dans une certaine composante et pas dans une autre.
le problème était que j'avais 2 formulaires dans un composant et le second formulaire n'avait pas encore [formGroup] et n'était pas encore inscrite puisque je construisais encore les formulaires.
j'ai écrit les deux formulaires sans laisser d'entrée pas enregistré qui résolvent le problème.