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


216

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

2
cosider premiando a una de las respuestas como la correcta
G. Stoynev

Respuestas:


420

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

1
buscar 'atributo de nombre' en este angular.io/docs/ts/latest/api/forms/index/…
Thyagarajan C

1
¿El atributo de nombre tiene que tener un valor único?
Alexander Mills el

2
De la documentación de Angular 5 ( angular.io/guide/forms ): "Definir un atributo de nombre es un requisito cuando se usa [(ngModel)] en combinación con un formulario".
elshev

2
¡Aplicable a Angular 7 también!
coderpc

2
Me gustaría agregar que solo funcionará si ngModel aparece primero antes del nombre.
Ronald Abellano el

55

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.


25
Una explicación de la implicación / efecto de cada alternativa sería útil: elegir una de las dos arbitrariamente no parece una buena idea.
Michael

2
te amo :)))))
Lola

1
Aquí hay una buena explicación para [ngModelOptions]="{standalone: true}: stackoverflow.com/a/38368261/3135317 . En mi caso, obtuve el temido `ngModel se usa dentro de una etiqueta de formulario, ya sea el atributo de nombre debe ...` error cuando tuve un `* ngFor * para una matriz anidada. El modelo de encuadernación estaba bien, la plantilla tenía púas. "Ejemplo 1" NO PODRÍA haber funcionado; El "Ejemplo 2" fue perfecto.
FoggyDay

Esta respuesta me ayudó dos veces en la misma semana (aparentemente no se pegó la primera vez);)
Jay Cummins

30

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

30

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. ingrese la descripción de la imagen aquí


16

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


16

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.


9

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.


3

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

3

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>

3

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.



2

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

2

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


1
Esto se debe a que está eliminando el formulario, eliminando así todas las características que proporciona el formulario.
astro8891

@ astro8891 me no necesita función
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" 

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.