Angular2 Si ngModel se usa dentro de una etiqueta de formulario, se debe establecer el atributo de nombre o el formulario

Recibo este error de Angular 2

core.umd.js: 5995 EXCEPCIÓN: No capturado (en promesa): Error: Error en app / model_exposure_currencies / model_exposure_currencies.component.html: 57: 18 causado por: Si ngModel se usa dentro de una etiqueta de formulario, el atributo de nombre debe ser set o el control de formulario debe definirse como 'independiente' en 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>

Así es como uso la etiqueta de formulario:

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

Si se usa ngForm, todos los campos de entrada que tengan [(ngModel)]=""deben tener un nombre de atributo con un valor.

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

Como cada desarrollador tiene un hábito común, no leer el error completo, solo lea la primera línea y comience a buscar la respuesta de otra persona :) :) También soy uno de ellos, por eso estoy aquí:

Lea el error, diciendo claramente:

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

¿Qué más necesitamos para entender este error?

Use cualquier opción, todo funcionará sin problemas.

Ambos atributos son necesarios y también vuelva a verificar que todos los elementos del formulario tengan el atributo "nombre". si está utilizando el concepto de envío de formulario, de lo contrario, simplemente use la etiqueta div en lugar del elemento de formulario.

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

En mi caso, el error ocurrió porque a continuación, en el marcado html, existía una línea más sin el atributo de nombre .

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

Pero el navegador aún informa que la primera fila tiene el error. Y es difícil descubrir la fuente del error si tiene otros elementos entre estos dos.

Cuando miras claramente la consola. Te dará dos ejemplos. Implementa cualquiera de estos.

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

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

Noté que la herramienta de desarrollador de Chrome a veces solo subraya el primer elemento en rojo swiggly incluso si está configurado correctamente con un nombre. Esto me tiró por un tiempo.

Uno debe asegurarse de agregar un nombre a cada elemento en el formulario que contenga ngModel, independientemente de cuál esté subrayada onduladamente.

Es bastante fácil solucionarlo.

Para mí, tuvimos más de una entrada en el formulario. Necesitamos aislar la entrada / línea que causa el error y simplemente agregar el nameatributo. Eso solucionó el problema para mí:

Antes de:

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

Después: acabo de agregar el nameatributo para selecty checkboxy eso solucionó el problema. Como sigue:

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

Como ves agregó el nameatributo. No es necesario que se le dé igual que su ngModelnombre. Solo proporcionar el nameatributo solucionará el problema.

Necesita importar {NgForm} desde @ angular / forms en su page.ts;

Código 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>

En sus Page.ts, implemente su función para manipular los datos del formulario:

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

Prueba esto...

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

Para todos los que no entran en pánico con el mensaje de error en sí, pero solo buscan en Google la explicación de por qué el ejemplo de aquí no funciona (es decir, el filtrado dinámico no ocurre cuando el texto se escribe en el campo de entrada): no funcionará hasta que agregue el parámetro de nombre en el campo de entrada. Nada apunta a la explicación de por qué la tubería no funciona, pero el mensaje de error apunta a este tema y solucionarlo de acuerdo con la respuesta aceptada hace que el filtro dinámico funcione.

No mencionó la versión que está utilizando, pero si está utilizando rc5 o rc6, ese estilo de formulario "antiguo" ha quedado en desuso. Eche un vistazo a esto para obtener orientación sobre las "nuevas" técnicas de formularios: https://angular.io/docs/ts/latest/guide/forms.html

Para poder mostrar la información en la forma que desea, debe dar esos aportes específicos de nombres de interés. Te recomiendo que tengas:

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

Para mí, la solución fue muy simple. Cambié la <form>etiqueta a a <div>y el error desaparece.

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

Esas son las tres cosas que necesita para usar ngModel dentro de una directiva formGroup.

Tenga en cuenta que se debe usar el mismo nombre.