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

Question

我刚刚开始开发我的第一个 Angular 2 应用程序，我收到以下令人困惑的错误消息：

错误：如果在表单标签中使用了 ngModel，则 name 属性 必须设置或形式 控件必须在 ngModelOptions 中定义为“独立”。

示例 1： 示例 2：

这是我得到错误的地方：

<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

试试这个格式

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

Answer 3

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

简单的灵魂：

如果您使用的是 ngform 或 ngsubmit，请在输入字段中添加名称属性

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

Answer 4

每个输入元素都有一个名称属性，Angular 表单需要该属性来向表单注册控件。这适用于模板驱动的表单。

foo.html

 <div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" id="power" [(ngModel)]="model.power" name="power" 
 required>
  <option *ngFor="let pow of powers"  [value]="pow">{{pow}}</option>
 </select>
 </div>

在 Hero.model.ts 中

export class Hero{

constructor(
    public id:number,
    public name:string,
    public power:string,
    public alterEgo?:string
 ){}
 }

name 属性在 .html 文件中应该相同。 在 foo.ts 文件中

   model = new Hero(13, 'Dr IQ', this.powers[1], 'abcd');

Answer 5

如果您错误地将 ngModel 添加到按钮，也会发生这种情况。

<button type="submit" class="btn btn-primary" ngModel >Submit</button>

只需从按钮中删除 ngModel 即可修复此错误。

Answer 6

删除 HTML 文件中的表单标签，然后它会自动解决您的问题

Answer 7

当在表单标签集名称或设置独立错误中使用 ngModel 时 我这样做是为了解决它：

<input [(ngModel)]="person.firstName" name="firstName">