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

Posted 2023-05-09

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

【英文标题】：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"

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

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

它也应该允许小数。

请帮帮我。

【问题讨论】：

这会帮助你***.com/questions/7372067/…

Only allow positive numbers with only one decimal in Angular 6

@SivakumarTadisetti 谢谢，我的要求是不要在输入中输入事件，如果没有验证支持，输入也不应该发生......

嗨，Shaik，我添加了一个解决方案。请检查并告诉我这是否解决了您的问题..

你好@aks44，有用，当我在值为0（零）时减小值，显示值为1，它应该只显示0

【参考方案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"