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

formularios en angular 5

Question

Recibo este error de Angular 2

core.umd.js: 5995 EXCEPCIÓN: No capturado (en promesa): Error: Error en app / model_exposure_currency / model_exposure_currency.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()">

Answer 1

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

Answer 2

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.

Answer 3

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

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

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

Answer 4

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 .

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

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.

Answer 5

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

Answer 6

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

Answer 7

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 echó por un tiempo.

Hay que asegurarse de agregar un nombre a cada elemento en el formulario que contiene ngModel, independientemente de cuál esté subrayado de forma ondulada.

Answer 8

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

Answer 9

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

Answer 10

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.

Answer 11

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>

Answer 12

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

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