javascript - 也可以阻止在输入类型编号中输入负值的 Angular 方式(在复制粘贴和增加、减少时)

Question

我的要求是在一个 Angular 项目中，我正在以这样的形式输入数字

<input type="number" #input class="form-control" [(ngModel)]="dataItem.quantity"

我不应该允许用户输入负值，即使是通过复制粘贴或通过输入类型数字的增加/减少按钮或思想键盘也是如此。

我们如何实现这一点，我看到了一些指令，它们将输入作为“文本”，我的情况是它应该只是“输入类型编号”。

它也应该允许小数。

请帮助我。

Answer 1

你可以像下面那样做

HTML:

<input type="number" min="0" (input)="checkValue($event)">

TS:

checkValue(event) {
  if (event.target.value < 0) {
    event.target.value = 0;
  }
}

你也可以使用(keyup)

更新:

In the Angular way, you can create a pipe. Working stackblitz

在 HTML 中:

<input type="number" min="0" [ngModel]="testValue | nonegativevalue" (ngModelChange)="testValue=$event">

无负值管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'nonegativevalue'})
export class NoNegativeValue implements PipeTransform {
  transform(value: number): number {
    if(value < 0) {
      value = 0;
      return value;
    }
    return value;
  }
}

If you use reactive form, then check this stackblitz