如果在表单标记集名称中使用ngModel或设置独立错误
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如果在表单标记集名称中使用ngModel或设置独立错误相关的知识,希望对你有一定的参考价值。
我刚刚开始开发我的第一个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ñ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ón</th>
<th>Legislació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>
这种形式的其他输入具有相同的结构,我不会在其中得到任何错误。
错误在哪里?我该如何解决?
答案
我找到了错误的位置。我已经把它放在这里帮助那些具有相同错误和相同的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>
另一答案
错误:如果在表单标记集名称中使用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}">
另一答案
每个input元素都有一个name属性,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');
另一答案
试试这种格式
<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>
另一答案
正如上面提到的Vans,如果您的select元素没有name属性,您将收到以下错误:
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.
以上是关于如果在表单标记集名称中使用ngModel或设置独立错误的主要内容,如果未能解决你的问题,请参考以下文章
Angular 4中的模板解析错误“没有将exportAs设置为ngModel的指令”