Angular：数字字段验证使用指令

Question

我正在尝试使用指令验证 input:number 字段。该字段的目的是仅接受 0-9 之间的数字或最多 3 位小数的小数（数字始终为正数，没有任何符号）。

由于有超过 30 个相同类型的字段，因此考虑创建一个指令来防止用户输入不必要的字符。

下面是我的代码以及 Stackblitz 示例：

指令：

import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[validTestValue]'
})
export class NumberDirective {

  @HostListener('keydown', ['$event'])
  @HostListener('input', ['$event'])
  onKeyDown(e) {
    const key = ['Backspace', 'Delete', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'];
    let check = key.includes(e.key) && /^\d{1,7}((.)|(.\d{0,3})?)$/.test(e.target.value);
    console.log(check)
    if (!check) {
      e.preventDefault();
    }
  }
}

HTML:

<input type="number" validTestValue class="testInput-field text-center" />
<!--Same input fields are there many times in my code-->

此代码的问题是我可以根据需要输入值，即只接受数字和小数点，但很少出现其他问题，如下所示：

无论是否为十进制数，异常结果最多应为 7 位数字。示例：1、12、1234567
如果是十进制数则小数点前最多7位，小数点后最多3位。示例：1、1.2、1.12、1.123
无法退格（如果达到长度）或移动光标。
如果字段为空白且没有任何默认值

Answer 1

我认为问题出在您的 regx

/^\d{1,7}((.)|(.\d{0,3})?)

这允许 1 到 7 位数字（{1,7} 与前一个标记匹配 1 到 7 次，尽可能多的次数）

这是我目前使用的。它可以控制一个字段允许多少个小数点

numbers only directive

在模板文件中

<input type="text" numbers-only="2"  placeholder=""

Answer 2

根据 Dilshan 的解决方案，它只会检查小数点后的位数，并且不会根据他的正则表达式验证空格。根据我的理解，我正在更新 Dilshan 的解决方案以满足您的要求。

正则表达式：^([\d]{0,7})((\.{1})([\d]{1,3})?)?$

HTML: <input type="text" validateNumber="7.3" />

这是Stackblitz的解决方案，供您参考。

希望对您有所帮助。

Angular：数字字段验证使用指令

Angular: Number field validation using directive

javascript

typescript

angular-directive

angular