angularjs 角的方式来阻止负值被输入到输入类型的数量(复制粘贴&增加,减少)也

ua4mk5z4  于 5个月前  发布在  Angular
关注(0)|答案(3)|浏览(67)

我的要求是在一个Angular 项目中,我以这样的形式输入数字,
第一个月
我不应该允许用户输入负值,即使从复制粘贴或通过增加/减少按钮的输入类型数字或思想键盘。
我们如何才能实现这一点,我见过一些指令,他们把输入作为'文本',我的情况是它应该是“输入类型编号”只。
它也应该允许小数。
请帮帮我

ddhy6vgd

ddhy6vgd1#

你可以像下面这样做
超文本标记语言:

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


如果你使用的是React形式,那么检查这个stackblitz

d6kp6zgx

d6kp6zgx2#

试试这个

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

字符串

nue99wik

nue99wik3#

如果你使用模板驱动方法,你可以在你定义了你的字段的模板(html文件)上使用这个模式:pattern="^[1-9]+[0-9]*$”。这是快速和容易的

相关问题