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


89

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>

Avez-vous importé FormsModuleet ReactiveFormsModule?
Günter Zöchbauer

Bien sûr, tous les deux
user2363245

AFAIK, la seule explication existante est la suivante: blog.angular-university.io
...

Source trouvée du changement: github.com/angular/angular/pull/10314
user2363245

Réponses:


171

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}"

1
que signifie autonome?
Jas

2
Cela signifie qu'il n'est pas géré par le modèle de formulaire / les données, vous pouvez donc transmettre des données par n'importe quel objet / modèle de votre
choix,

Je ne vois ce problème que dans ma configuration de test. Que manque-t-il exactement? [ngModelOptions] = "{standalone: ​​true}" corrige le test mais change la logique. ngModel est hérité du composant parent, qui déclare ngForm dans mon cas
aholbreich

2
Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7. https://next.angular.io/api/forms/FormControlName#use-with-ngmodel
WasiF

27

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.


6
Et si vous voulez utiliser if pour la validation ET l'utiliser avec ngModel en même temps?
Paul

Dans mon cas, j'ai manqué de déclarer formControl pour un élément dans formGroup!
Sagar Khatri


8

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>.


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>


1

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.


1

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.


1

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>

une solution pour cela pourrait également être si vous utilisez un [formGroup] = "myGroup" et référencez en interne avec [(ngModel)] une propriété qui est nog dans le formGroup. essayez d'ajouter [ngModelOptions] = "{standalone: ​​true}" afin de dire à votre compilateur qu'il peut être exclu et qu'il s'agit d'une propriété autonome
ProblemAnswerQue

0

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


0

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('')
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.