阻止在输入类型号中输入负值的角度方式（在复制粘贴和增加、减少时）答案

【问题标题】：Angular way to stop negative values from being entered in input type number (on copy-paste & increase, decrease) also阻止在输入类型号中输入负值的角度方式（在复制粘贴和增加、减少时）
【发布时间】：2020-10-23 19:36:01
【问题描述】：

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

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

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

我们怎样才能做到这一点，我看过一些指令，他们将输入作为“文本”，我的情况是它应该只是“输入类型号”。

它也应该允许小数。

请帮帮我。

【问题讨论】：

这会帮助你stackoverflow.com/questions/7372067/…
Only allow positive numbers with only one decimal in Angular 6
@SivakumarTadisetti 谢谢，我的要求是不要在输入中输入事件，如果没有验证支持，输入也不应该发生......
嗨，Shaik，我添加了一个解决方案。请检查并告诉我这是否解决了您的问题..
你好@aks44，有用，当我在值为0（零）时减小值，显示值为1，它应该只显示0

标签： javascript html jquery angularjs angular

【解决方案1】：

你可以像下面那样做

HTML：

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

TS：

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

你也可以使用(keyup)

更新：

以 Angular 的方式，您可以创建管道。工作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;
  }
}

如果您使用响应式表单，请查看stackblitz

【讨论】：

在反应形式中我们如何使用这个管道？ @Sivakumar Tadisetti
@ShaikHabeeb 更新了我的答案，请查看下面的答案 ;)

【解决方案2】：

试试这个..

<input type="number" min="0" #input class="form-control" [(ngModel)]="dataItem.quantity" 
oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

【讨论】：

如果input type='text' 那么我们在文本框中看不到增加和减少按钮
试试 type="number" min="0"