我正在将功能从 div 转换/替换为 mat-table。 分区代码: <div *ngFor="let contract of vm.contracts; let j = index"> <div [ngClass]="getContractRowClass(contrac ...
提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供 中文繁体 英文版本 中英对照 版本,有任何建议请联系yoyou2525@163.com。
我正在构建一个 angular 应用程序,我将在其中将项目添加到表中。 添加的行将基于项目名称及其数量的输入。
如果出现以下情况,我正在努力防止将项目添加到表格中:
如果不满足这些条件中的任何一个,将显示一条错误消息。 我能够显示错误消息,但添加了一行无效字段。
注意:如果不满足条件,我不允许禁用“添加项目”按钮。
这是我的代码:
<form #order="ngForm">
<table>
<tr>
<td>
<button type="submit" class="btn btn-default" (click)="addItem()">Add
Item</button>
</td>
<td>
<select [(ngModel)]="newItem.name" required name="newItemName" #newItemName="ngModel" minlength="1">
<option *ngFor="let o of options" [ngValue]="o">{{o.name}}</option>
</select>
</td>
<td>Qty</td>
<td>
<input type="text" pattern="[0-9]*" required [(ngModel)]="newItem.quantity"
name="newItemQuantity" #newItemQuantity="ngModel">
</td>
</tr>
</table>
<p *ngIf="newItemName?.errors?.required && order.submitted">Please select an item.</p>
<p *ngIf="newItemQuantity?.errors?.required && order.submitted">Quantity is required.</p>
</form>
<table>
<thead>
<tr>
<th>Item</th>
<th>Qty</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of items; let i = index">
<td><label class="form-control">{{item.name.name}}</label></td>
<td><label class="form-control">{{item.quantity}}</label></td>
<td><label class="form-control">{{item.name.price}}</label></td>
<td></td>
<td><input type="button" value="delete" (click)="removeItem(i)"></td>
</tr>
</tbody>
</table>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
items: Array<any> = [];
newItem: any = {};
options = [
{name: "apples", price: 1.19},
{name: "peaches", price: 1.39},
{name: "pears", price: 1.69},
{name: "plums", price: 1.59}
];
addItem() {
if (this.newItem != undefined) {
this.items.push(this.newItem);
this.newItem = {};
}
}
removeItem(index) {
this.items.splice(index, 1); // remove 1 item at ith place
}
}
只需在 add 方法的开头添加一个条件:
addItem() {
if(!this.newItem || !this.newItem.name ||
(this.newItem && !this.newItem.name)) {
return;
}
this.items.push(this.newItem);
this.newItem = {};
}
您必须修改addItem()
function 以检查name
和quantity
是否已定义且有效。 并且仅在条件为真时添加项目。
addItem() {
if (this.newItem && this.newItem.name && this.newItem.quantity &&
this.newItem.quantity > 0 && Number.isInteger(Number(this.newItem.quantity))) {
this.items.push(this.newItem);
this.newItem = {};
}
}
Number.isInteger()方法可用于检查quantity
是否为有效 integer。 这确保不允许使用小数。
StackBlitz 上的现场演示: https://stackblitz.com/edit/angular-vqcikf
这是你的答案,检查 newItem object 是否存在(不等于 undefined),然后检查名称 key & value 是否存在(不等于 undefined 和空字符串''),然后检查数量 key & value 是否存在(不等于到未定义和空字符串''),然后确保数量值大于0。
addItem() {
if(this.newItem && this.newItem.name && this.newItem.quantity && this.newItem.quantity > 0) {
this.newItem.quantity = Number(this.newItem.quantity);
this.items.push(this.newItem);
this.newItem = {};
}
}
注意:JS 会处理字符串数据和数值之间的比较
例子:
"1.11" > 1 //true
"0.01" < 0 //false
"1.0a" > 0 // undefined (which is evaluated as false)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.