如果在表单标签集名称中使用ngModel或设置独立错误 [英] If ngModel is used within a form tag set name or set standalone error

问题描述

我刚刚开始开发我的第一个Angular 2应用，并且收到了以下令人困惑的错误消息:

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

错误:如果在表单标签中使用ngModel，则name属性 必须设置或表格 控件必须在ngModelOptions中定义为独立".

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>

我在此行得到错误:

<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 the error? How can I fix it?

推荐答案

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

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>

这篇关于如果在表单标签集名称中使用ngModel或设置独立错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！