Angular2 Se ngModel viene utilizzato all'interno di un tag del modulo, è necessario impostare l'attributo name o il modulo

Ricevo questo errore da Angular 2

core.umd.js: 5995 ECCEZIONE: non rilevata (promessa): errore: errore in app / model_exposure_currencies / model_exposure_currencies.component.html: 57: 18 causato da: Se ngModel viene utilizzato all'interno di un tag del modulo, l'attributo name deve essere set o il controllo del form deve essere definito come 'standalone' in 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>

Ecco come utilizzo il tag del modulo:

 <form #f="ngForm" (ngSubmit)="onSubmit()">

Se si utilizza ngForm, tutti i campi di input che [(ngModel)]=""deve avere un nome di attributo con un valore.

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

Poiché ogni sviluppatore ha l'abitudine comune di non leggere l'errore completo, basta leggere la prima riga e iniziare a cercare la risposta di qualcun altro :) :) Sono anche uno di loro, ecco perché sono qui:

Leggi l'errore, dicendo chiaramente:

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

Cos'altro dobbiamo capire questo errore?

Utilizzare una qualsiasi opzione tutto funzionerà senza problemi.

Nel mio caso l'errore si è verificato perché sotto nel markup html esisteva un'altra riga senza l' attributo 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>

Ma il browser riporta ancora l'errore nella prima riga. Ed è difficile scoprire la fonte dell'errore se hai altri elementi tra questi due.

Entrambi gli attributi sono necessari e ricontrollare che tutti gli elementi del modulo abbiano l'attributo "nome". se stai usando il concetto di invio del modulo, altri saggi usano semplicemente il tag div invece dell'elemento del modulo.

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

Quando guardi chiaramente la console, ti darà due esempi. Implementa uno di questi.

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

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

Ho notato che lo strumento di sviluppo di Chrome a volte sottolinea solo il primo elemento in rosso swiggly anche se è impostato correttamente con un nome. Questo mi ha gettato per un po '.

Bisogna essere sicuri di aggiungere un nome a ogni elemento del modulo che contiene ngModel, indipendentemente da quale sia sottolineato in modo fluido.

È abbastanza facile per una correzione.

Per me, abbiamo avuto più di un input nel modulo. Dobbiamo isolare l'input / la riga che causa l'errore e aggiungere semplicemente l' nameattributo. Ciò ha risolto il problema per me:

Prima:

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

Dopo: ho appena aggiunto l' nameattributo per selecte checkboxe quello ha risolto il problema. Come segue:

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

Come vedi aggiunto l' nameattributo. Non è necessario avere lo stesso ngModelnome. Basta fornire l' nameattributo per risolvere il problema.

Devi importare {NgForm} da @ angular / form in page.ts;

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

In Page.ts, implementa la tua funzione per manipolare i dati del modulo:

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

Prova questo...

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

Per tutti coloro che non si fanno prendere dal panico con il messaggio di errore stesso, ma cercano semplicemente la spiegazione del perché l'esempio da qui non funziona (ovvero il filtro dinamico non si verifica quando il testo viene digitato nel campo di input): non funzionerà fino a quando non aggiungerai il parametro name nel campo di input. Nulla indica la spiegazione del motivo per cui pipe non funziona, ma il messaggio di errore punta a questo argomento e risolverlo in base alla risposta accettata fa funzionare il filtro dinamico.

Non hai menzionato la versione che stai usando, ma se stai usando rc5 o rc6, quel "vecchio" stile del modulo è stato deprecato. Dai un'occhiata a questo per una guida alle "nuove" tecniche dei moduli: https://angular.io/docs/ts/latest/guide/forms.html

Per poter visualizzare le informazioni nel modulo desiderato, è necessario fornire quegli input specifici di nomi di interessi. Ti consiglierei di avere:

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

Per me, la soluzione è stata molto semplice. Ho cambiato il <form>tag in a <div>e l'errore scompare.

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

Queste sono le tre cose necessarie per usare ngModel all'interno di una direttiva formGroup.

Si noti che dovrebbe essere utilizzato lo stesso nome.