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

ua4mk5z4  于 2024-01-05  发布在  Angular
关注(0)|答案(3)|浏览(238)

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

ddhy6vgd

ddhy6vgd1#

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

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

字符串
TS:

  1. checkValue(event) {
  2. if (event.target.value < 0) {
  3. event.target.value = 0;
  4. }
  5. }


也可以使用(keyup)

更新:

在Angular中,你可以创建一个管道。工作stackblitz
在HTML中:

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

非负性评估管道

  1. import { Pipe, PipeTransform } from '@angular/core';
  2. @Pipe({name: 'nonegativevalue'})
  3. export class NoNegativeValue implements PipeTransform {
  4. transform(value: number): number {
  5. if(value < 0) {
  6. value = 0;
  7. return value;
  8. }
  9. return value;
  10. }
  11. }


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

展开查看全部
d6kp6zgx

d6kp6zgx2#

试试这个

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

字符串

nue99wik

nue99wik3#

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

相关问题