Angular 正则表达式指令

Question

我正在尝试在 Angular 7 中创建一个 Angular 指令，以通过输入属性传递正则表达式，并且不允许用户键入不符合条件的字符'匹配正则表达式。

它在一定程度上起作用，但我尝试验证的 RegExp 似乎在 .特点。

在我的 HTML

    <input type="text" alphaNumeric="^(\d{1,3}|\d{0,3}\.\d{1,2})$">>

在我的指令中

  @Input('alphaNumeric') pattern: string;

  // Listen for the input event to also handle copy and paste.
  @HostListener('input', ['$event.target.value'])
  onInput(value: string) {

    if (this.pattern && this.pattern !== '' ) { 

     let patternRegExp : RegExp = new RegExp(this.pattern, 'g');

     if (!patternRegExp.test(value)) {
          this.el.control.patchValue(value.slice(0, -1));  
     }
 }

RegExp 应该允许最多 3 位数字或最多 3 位数字和 2 位小数，即允许 345 或 343.45。 RexExp 在 RegExp 测试仪上独立运行。

我看到的是它阻止输入字母，但也阻止输入 .字符，因此您可以键入 333 但不能键入 33.45。

我读到 RegExp 可以被 \ 转义或整个 RegExp 包裹在 / 字符中，尝试了各种方法但无法让它工作。

Answer 1

将正则表达式更改为^(\d{1,3}|\d{0,3}\.\d{0,2})$（最后将 1 替换为 0）。在您的情况下，当有人键入 . 时，它与正则表达式 \.\d{1,2} 不匹配（因为正则表达式至少需要一位数字），结果点被删除了。

Angular 正则表达式指令

Angular Regexp Directive

regex

angular

directive