If ngModel is used within a form tag set name or set standalone error

Question

I've just started developing my first Angular 2 app and I got the following confusing error message:

Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

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

This is where I get the error:

<button (click)="addRow()" class="btn">A&ntilde;adir</button> <form #productionOrderForm="ngForm" (ngSubmit)="onSubmit()">     <table class='table' *ngIf="productionorders?.length > 0">         <thead>             <tr>                 <th>Nombre</th>                 <th>Num. items primer nivel</th>                 <th>Reducci&oacute;n</th>                 <th>Legislaci&oacute;n</th>                 <th>Producto</th>             </tr>         </thead>         <tbody>             <tr *ngFor="let productionorder of productionorders; let rowIndex = index">                 <td>                     <input name="Name-{{rowIndex}}" #name="ngModel" [(ngModel)]="productionorder.name" placeholder="Nombre" required>                     <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">                         <div *ngIf="name.errors.required">                             Obligatorio.                         </div>                     </div>                 </td>                 <td>                     <input name="NumItems-{{rowIndex}}" #numitems="ngModel" [(ngModel)]="productionorder.numitems" placeholder="Items por nivel" required>                     <div *ngIf="numitems.invalid && (numitems.dirty || numitems.touched)" class="alert alert-danger">                         <div *ngIf="numitems.errors.required">                             Obligatorio.                         </div>                     </div>                 </td>                 <td>                     <law (notifyParent)="getNotification($event)"></law>                 </td>                 <td>                     <select [(ngModel)]="productionorder.productid" #productId="ngModel">                         <option></option>                         <option *ngFor="let product of products" [value]="law.lawId">{{law.name}}</option>                     </select>                 </td>             </tr>         </tbody>     </table>      <button *ngIf="productionorders?.length > 0 && law != ''" type="submit" class="btn btn-success" [disabled]="disableSubmit()">Guardar cambios</button> </form> 

I get the error at this line:

<div *ngIf="numitems.invalid && (numitems.dirty || numitems.touched)" class="alert alert-danger"> 

But the error message is confuse because I have set the name in the input field:

<input name="NumItems-{{rowIndex}}" #numitems="ngModel" [(ngModel)]="productionorder.numitems" placeholder="Items por nivel" required> 

The others input in this form have the same structure and I don't get any error in them.

Where is this error coming from? How can I fix it?

Answer 1

I have found where the error is. I have put it here to help someone that has the same error and the same knowledge about Angular (or programming).

The error is in the following select, it hasn't a name. I did this to fix it:

<select name="ProductId-{{rowIndex}}" #productId="ngModel" [(ngModel)]="productionorder.productid" required>     <option></option>     <option *ngFor="let product of products" [value]="law.lawId">{{law.name}}</option> </select>