Wenn ngModel innerhalb eines Formular-Tag Satzname verwendet wird, oder setzen eigenständige Fehler

Question

Ich habe gerade angefangen habe meine erste Angular 2 app und ich ge folgende confuse Fehlermeldung zu entwickeln:

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

Dies ist, wo ich die bekommen Fehler:

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

ich erhalte den Fehler in dieser Zeile:

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

Aber die Fehlermeldung, weil ich ist verwirren den Namen in das Eingabefeld gesetzt haben:

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

Der andere Eingang in dieser Form haben die gleiche Struktur und ich habe nicht einen Fehler in ihnen.

Wo ist der Fehler? Wie kann ich es reparieren?

Answer 1

Ich habe gefunden, wo der Fehler ist. Ich habe es hier um jemandem zu helfen, der den gleichen Fehler und das gleiche Wissen über Angular (oder Programmierung) hat.

Der Fehler ist in der folgenden Auswahl, es hat keinen Namen. Ich habe das es zu beheben:

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

Answer 2

Versuchen Sie dieses Format

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