我正在构建一个有角度的应用程序,将在其中向表添加项目。 添加的行将基于商品名称及其数量的输入。

如果出现以下情况,我正在努力防止将项目添加到表中:

  • 没有选择任何内容或
  • 在数量字段中输入非正数(数量字段仅接受自然数)

如果不满足以下任何条件,将显示一条错误消息。 我能够显示错误消息,但是添加了具有无效字段的行。

注意:如果不满足条件,则不允许禁用“添加项目”按钮。

这是我的代码:

app.component.html

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

app.component.ts

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
  }

}

项目仍被添加

#1楼 票数:0

只需在添加方法的开头添加条件:

addItem() {
  if(!this.newItem || !this.newItem.name || 
      (this.newItem && !this.newItem.name)) {
    return;
  }

  this.items.push(this.newItem);
  this.newItem = {};
}

#2楼 票数:0

您必须修改addItem()函数以检查namequantity是否均已定义并且有效。 并且仅在条件为真时添加项目。

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是否为有效整数。 这样可以确保不允许使用小数。

StackBlitz上的实时演示: https ://stackblitz.com/edit/angular-vqcikf

#3楼 票数:0

这是您的答案,请检查newItem对象是否存在(不等于未定义),然后检查名称键和值是否存在(不等于undefined和空字符串”),然后检查数量键和值是否存在(不等于)为未定义且为空字符串''),然后确保数量值大于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)

  ask by DanCode translate from so

未解决问题?本站智能推荐:

1回复

如何在角度5中有条件地向表中添加行

我是Angular 5的app.component.ts ,我的app.component.ts有一个对象数组。 我想同时使用*ngFor和*ngIf来创建表的行并同时应用条件。 基本上像 但是,这是不允许的,并显示错误: 一个元素不能有多个模板绑定。 如何实现呢?
1回复

如何以角度向表中添加行?

我有一张使用 JSON 文件中的数据的表,我如何添加一个允许用户将数据输入到文本字段并将该数据添加到表中的函数? 这是我所拥有的简单预览,它在表格中显示 JSON 中的数据 注意:我不想添加到 JSON 文件(我知道这是不可能的),只是表
2回复

表中的Angular4-添加行

我有此服务订阅 而且我有一张桌子。 当我从callSearchService获得用户信息(名字和姓氏)时,我对如何向表中动态添加行感兴趣
1回复

添加行上的垫表事件

我想在 mat-table 中添加新行时执行一个操作,但我不知道它何时发生。 有任何发射器或其他方式吗? 我已经阅读了所有 mat-table 文档并在互联网上搜索,但我什么也没找到。 我要这个: <tr mat-row *matRowDef="let row; columns: column
1回复

有条件地添加指令

我想有条件地向一个组件添加一个指令(其中au-disabled , au-accented和au-focused是指令): 上述方法有效(并且在某种程度上可以接受),因为(在我的情况下) disabled , accented和focused的条件属性是互斥的 - 我的问题出现在条件属性不相
1回复

添加行时来自PrimeNGp数据表的事件

我有一个绑定到条目列表的p-datatable表。 我想把重点放在动态创建的新行上; 专门针对新行中的input 。 但是如何? 每当我将条目动态添加到绑定的条目列表中时,都会添加新的数据表行。 工作正常。 但是我需要知道什么时候发生,并且需要访问新行,以便可以设置焦点。 我一直
1回复

如何使用角度4在引导表中动态添加行值?

我正在使用4号角引导表:当我在单击输入按钮的同时在文本框中输入一个产品时,我正在从后端获取表中的第一行值,但再次在文本框中输入了另一个产品第二行值未显示在表,我给了警报窗口,它还显示第二行值...如何在表中添加第二行或多行值??? 警报:在我的警报窗口中显示数据---- [[[2,“ se
2回复

如何在Angular7的表中添加行组件?

我使用最新版本的angluar。 (7.2.0) 我有个人 tr 组件,如: 我想在表中使用这个组件,如: 得到如下错误: 如何在表格中正确添加我的组件?