如果在表单标记集名称中使用ngModel或设置独立错误

Question

我刚刚开始开发我的第一个Angular 2应用程序,并且我发现以下混淆错误消息:

错误:如果在表单标记中使用了ngModel,则必须设置name属性,或者必须在ngModelOptions中将表单控件定义为"standalone".

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

这是我收到错误的地方:

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

我在这一行得到错误:

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

但是错误消息很混乱,因为我在输入字段中设置了名称:

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

这种形式的其他输入具有相同的结构,我不会在其中得到任何错误.

错误在哪里？我该如何解决？

Answer 1

我找到了错误的位置.我已经把它放在这里帮助那些具有相同错误和相同的Angular(或编程)知识的人.

错误在以下选择中,它没有名称.我这样做是为了解决它:

<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

错误:如果在表单标记集名称中使用ngModel或设置独立错误

简单的灵魂:

在使用ngform或ngsubmit的情况下,将name属性添加到输入字段

Example 1: <input [(ngModel)]="User.age" name="age">



or 

**if you are using direct [(ngModel)]="User.age" ,,,then add this [ngModelOptions]="{standalone: true}" to input field**

Example 2: <input [(ngModel)]="User.age" [ngModelOptions]="{standalone: true}">