web-dev-qa-db-fra.com

Angular2 Si ngModel est utilisé dans une balise de formulaire, l'attribut name doit être défini ou le formulaire.

Je reçois cette erreur de Angular 2

core.umd.js: 5995 EXCEPTION: Uncaught (promis): Erreur: Erreur dans app/model_exposure_currency/model_exposure_connaie.component.html: 57: 18 provoquée par: Si ngModel est utilisé dans une balise de formulaire, l'attribut name doit être soit set ou le contrôle de formulaire doit être défini comme 'autonome' dans ngModelOptions.

      Example 1: <input [(ngModel)]="person.firstName" name="first">
      Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
<td *ngFor="let lag of ce.lags">
    <div class="form-group1">
        <input name="name" [(ngModel)]="lag.name" [ngModelOptions]="{standalone: true}"  class="form-control" pattern="[0-9]*(\.[0-9]+)?" required>
    </div>

</td>

Voici comment j'utilise la balise de formulaire:

 <form #f="ngForm" (ngSubmit)="onSubmit()">
angularangular-forms
171
Tampa

Si ngForm est utilisé, tous les champs de saisie comportant [(ngModel)]="" doivent avoir un attribut name avec une valeur.

<input [(ngModel)]="firstname" name="something">
351
Thyagarajan C

Comme chaque développeur a l'habitude de ne pas lire l'erreur complète, lisez simplement la première ligne et commencez à chercher la réponse de quelqu'un d'autre :) :) Je suis aussi l'un d'entre eux, c'est pourquoi je suis ici:

Lisez l'erreur en disant clairement:

Example 1: <input [(ngModel)]="person.firstName" name="first">
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">

Que faut-il de plus pour comprendre cette erreur?

Utilisez n'importe quelle option, tout fonctionnera sans heurts.

41
Ali Adravi

Les deux attributs sont nécessaires et revérifier que tous les éléments de formulaire ont un attribut "name". Si vous utilisez le concept de soumission de formulaire, utilisez une balise div à la place d'un élément de formulaire.

<input [(ngModel)]="firstname" name="something">
28
Vinayak Shedgeri

Dans mon cas, l'erreur est survenue car, dans le balisage HTML, il restait une ligne supplémentaire sans l'attribut name.

<form id="form1" name="form1" #form="ngForm">
  <div class="form-group">
    <input id="input1" name="input1" [(ngModel)]="metaScript" />
    ... 
    <input id="input2" [(ngModel)]="metaScriptMessage"/>
  </div>
</form>

Mais le navigateur signale toujours que la première ligne contient l'erreur. Et il est difficile de découvrir la source d'erreur si vous avez d'autres éléments entre ces deux. enter image description here

16
elshev

Lorsque vous regardez clairement la console, elle vous donnera deux exemples.Appliquez-les.

<input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone:
   true}">

o<input [(ngModel)]="person.firstName" name="first">

13
RAHUL KUMAR

J'ai remarqué que l'outil de développeur Chrome ne souligne parfois que le premier élément en rouge swiggly, même s'il est correctement configuré avec un nom. Cela m'a jeté pendant un moment.

Vous devez être sûr d’ajouter un élément name à every sur le formulaire qui contient ngModel, quel que soit celui qui est souligné.

11
Eric

Vous devez importer {NgForm} depuis @ angular/forms dans votre page.ts;

Code HTML:

<form #values="ngForm" (ngSubmit)="function(values)">
 ...
 <ion-input type="text" name="name" ngModel></ion-input>
 <ion-input type="text" name="mail" ngModel></ion-input>
 ...
</form>

Dans votre page.ts, implémentez votre fonction pour manipuler les données de formulaire:

function(data) {console.log("Name: "data.value.name + " Mail: " + data.value.mail);}
3
João Paulo Paiva

Essaye ça...

    <input type="text" class="form-control" name="name" placeholder="Name"
                  required minlength="4" #name="ngModel"
                  ngModel>
                  <div *ngIf="name.errors && (name.dirty || name.touched)">
                      <div [hidden]="!name.errors.required" class="alert alert-danger form-alert">
                          Please enter a name.
                      </div>
                      <div [hidden]="!name.errors.minlength" class="alert alert-danger form-alert">
                          Enter name greater than 4 characters.
                      </div>
                  </div>
3
Sai Krishna

Pour moi, la solution était très simple. J'ai changé la balise <form> en <div> et l'erreur disparaît.

2
John Henckel

Pour tout le monde qui ne panique pas avec le message d'erreur lui-même, mais googler juste pour expliquer pourquoi l'exemple de ici ne fonctionne pas (ie le filtrage dynamique ne se produit pas lorsque le texte est saisi dans l'entrée field): cela ne fonctionnera que si vous ajoutez le paramètre name dans le champ de saisie. Rien n'indique pourquoi le canal ne fonctionne pas, mais le message d'erreur pointe vers ce sujet et sa correction en fonction de la réponse acceptée permet au filtre dynamique de fonctionner.

2
Ilya Yevlampiev

Vous n'avez pas mentionné la version que vous utilisez, mais si vous utilisez rc5 ou rc6, cet "ancien" style de formulaire est obsolète. Jetez un coup d’œil à ceci pour vous guider sur les "nouvelles" techniques de formulaire: https://angular.io/docs/ts/latest/guide/forms.html

2
John Baird

Pour pouvoir afficher les informations sous la forme que vous souhaitez, vous devez attribuer à ces entrées des noms spécifiques. Je vous recommande d'avoir:

<form #f="ngForm" (ngSubmit)="onSubmit(f)"> ...
<input **name="firstName" ngModel** placeholder="Enter your first name"> ...
2
thnkr22

C'est assez facile pour un correctif.

Pour moi, nous avons eu plus d'une entrée dans le formulaire. Nous devons isoler l'erreur source/ligne et ajouter simplement l'attribut name. Cela a résolu le problème pour moi:

Avant:

<form class="example-form">

    <mat-form-field appearance="outline">

      <mat-select placeholder="Select your option" [(ngModel)]="sample.stat"> <!--HERE -->

          <mat-option *ngFor="let option of actions" [value]="option">{{option}</mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field appearance="outline">
      <mat-label>Enter number</mat-label>

      <input id="myInput" type="text" placeholder="Enter number" aria-label="Number"
        matInput [formControl]="myFormControl" required [(ngModel)]="number">  <!--HERE -->

    </mat-form-field>

    <mat-checkbox [(ngModel)]="isRight">Check!</mat-checkbox> <!--HERE -->

  </form>

Après: Je viens d'ajouter l'attribut name pour select et checkbox, ce qui a résolu le problème. Comme suit:

<mat-select placeholder="Select your option" name="mySelect" 
  [(ngModel)]="sample.stat"> <!--HERE: Observe the "name" attribute -->

<input id="myInput" type="text" placeholder="Enter number" aria-label="Number"
        matInput [formControl]="myFormControl" required [(ngModel)]="number">  <!--HERE -->

<mat-checkbox name="myCheck" [(ngModel)]="isRight">Check!</mat-checkbox> <!--HERE: Observe the "name" attribute -->

Comme vous le voyez ajouté l’attribut name. Il n'est pas nécessaire de donner le même nom que votre nom ngModel. Il suffit de fournir l'attribut name pour résoudre le problème.

0
Kailas