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 d'Angular 2

core.umd.js: 5995 EXCEPTION: Uncaught (en promesse): Erreur: Erreur dans app / model_exposure_currencies / model_exposure_currencies.component.html: 57: 18 provoqué par: Si ngModel est utilisé dans une balise de formulaire, soit l'attribut name doit être 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()">

Si ngForm est utilisé, tous les champs d'entrée qui ont [(ngModel)]=""doivent avoir un nom d' attribut avec une valeur.

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

Comme chaque développeur a une habitude commune, de ne pas lire l'erreur complète, il suffit de lire la première ligne et de commencer à chercher la réponse de quelqu'un d'autre :) :) Je suis aussi l'un d'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 nous faut-il de plus pour comprendre cette erreur?

Utilisez n'importe quelle option, tout fonctionnera en douceur.

Dans mon cas, l'erreur s'est produite car ci-dessous dans le balisage html, une ligne de plus existait 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 de l'erreur si vous avez d'autres éléments entre ces deux.

Les deux attributs sont nécessaires et revérifiez également que tous les éléments du formulaire ont l'attribut "nom". si vous utilisez le concept de soumission de formulaire, sinon utilisez simplement la balise div au lieu de l'élément de formulaire.

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

Lorsque vous regardez clairement la console, cela vous donnera deux exemples.

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

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

J'ai remarqué que l'outil de développement Chrome ne souligne parfois que le premier élément en rouge ondulé même s'il est correctement configuré avec un nom. Cela m'a bouleversé pendant un certain temps.

Il faut être sûr d'ajouter un nom à chaque élément du formulaire qui contient ngModel, quel que soit celui qui est souligné de manière ondulée.

C'est assez facile pour un correctif.

Pour moi, nous avions plus d'une entrée dans le formulaire. Nous devons isoler l'entrée / la ligne provoquant l'erreur et simplement ajouter l' nameattribut. 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' nameattribut pour selectet checkboxet cela 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, l'ajout de l' nameattribut. Il n'est pas nécessaire de donner votre ngModelnom. Le simple fait de fournir l' nameattribut résoudra le problème.

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 du formulaire:

function(data) {console.log("Name: "data.value.name + " Mail: " + data.value.mail);}

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>

Pour tous ceux qui ne paniquent pas avec le message d'erreur lui-même, mais qui cherchent simplement à expliquer pourquoi l'exemple d' ici ne fonctionne pas (c'est-à-dire que le filtrage dynamique ne se produit pas lorsque le texte est tapé dans le champ de saisie): cela ne fonctionnera pas jusqu'à ce que vous ajoutiez le paramètre de nom dans le champ de saisie. Rien ne permet d'expliquer pourquoi le canal ne fonctionne pas, mais le message d'erreur pointe vers cette rubrique et le corriger en fonction de la réponse acceptée fait fonctionner le filtre dynamique.

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 œil à cela pour obtenir des conseils sur les "nouvelles" techniques de formulaires: https://angular.io/docs/ts/latest/guide/forms.html

Afin de pouvoir afficher les informations sous la forme que vous souhaitez, vous devez donner ces entrées spécifiques de noms d'intérêt. Je vous recommande d'avoir:

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

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

<select name="country" formControlName="country" id="country" 
       class="formcontrol form-control-element" [(ngModel)]="country">
   <option value="90">Turkey</option>
   <option value="1">USA</option>
   <option value="30">Greece</option>
</select>

name="country"
formControlName="country" 
[(ngModel)]="country" 

Ce sont les trois choses nécessaires pour utiliser ngModel dans une directive formGroup.

Notez que le même nom doit être utilisé.