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


219

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

2
che considera una delle risposte quella corretta
G. Stoynev il

Risposte:


422

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

1

1
l'attributo name deve avere un valore univoco?
Alexander Mills,

2
Dalla documentazione di Angular 5 ( angular.io/guide/forms ): "La definizione di un attributo name è un requisito quando si utilizza [(ngModel)] in combinazione con un modulo."
elshev,

2
Applicabile anche ad Angular 7!
coderpc,

2
Vorrei aggiungere che funzionerà solo se ngModel viene prima del nome.
Ronald Abellano,

55

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.


25
Una spiegazione dell'implicazione / effetto di ciascuna alternativa sarebbe utile: scegliere una delle due arbitrariamente non sembra una buona idea.
Michael,

2
ti amo :)))))
Lola

1
Ecco una buona spiegazione per [ngModelOptions]="{standalone: true}: stackoverflow.com/a/38368261/3135317 . Nel mio caso, ho ottenuto il temuto `ngModel è usato all'interno di un tag del modulo, o l'attributo name deve ...` errore quando avevo un `* ngFor * per un array nidificato. La rilegatura del modello andava bene, il modello era scoperto. "Esempio 1" NON POTREBBE funzionare; "Esempio 2" è stato perfetto.
FoggyDay

Questa risposta mi ha aiutato due volte nella stessa settimana (apparentemente non si è attaccato la prima volta);)
Jay Cummins,

31

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. inserisci qui la descrizione dell'immagine


30

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

16

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


16

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.


10

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


3

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);}

3

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>

3

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.



2

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

2

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


1
Questo perché stai rimuovendo il modulo, rimuovendo così tutte le funzionalità fornite dal modulo.
astro8891,

@ astro8891 non ho bisogno di funzionalità
John Henckel,

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.