Как добавить строку в таблицу условно?

Question

Я создаю угловое приложение, в котором я буду добавлять элемент в таблицу.Добавленная строка будет основана на вводе имени элемента и его количестве.

Я работаю над предотвращением добавления элементов в таблицу, если:

• Ничего не выбраноили
• В поле количества вводится неположительное число (поле количества принимает только натуральные числа)

Если не выполнено какое-либо из этих условий, появится сообщение об ошибке.Я могу отобразить сообщения об ошибках, но добавлена ​​строка с недопустимыми полями.

Примечание. Мне не разрешено отключать кнопку «Добавить элемент», если условия не выполняются.

Вот мой код:

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
  }

}

Answer 1

Вы должны изменить функцию addItem(), чтобы проверить, определены ли и 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 действительным целым числом.Это гарантирует, что дробные числа недопустимы.

Демонстрация в реальном времени на StackBlitz: https://stackblitz.com/edit/angular-vqcikf

Answer 2

Вот ваш ответ, проверьте, существует ли объект newItem (не равный undefined), затем проверьте, существует ли имя ключа и значение (не равное 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)

Answer 3

Просто добавьте условие в начале вашего метода добавления:

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

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