Regex 强制用户在输入时键入正则表达式

我一直在尝试使用regexp来强制用户在输入中键入我想要的内容，而不是在输入字段中显示它。我尝试使用许多事件，但事件在输入字段中键入它，并且必须使用代码进行额外验证或发现一些错误。从未找到正确的事件

这是我的html文件：

<input [(ngModel)]="someModel" (keydown)="validate($event);">

这是我的组件

validateRegex(event: any) {
    let regexp = new RegExp(/^([0-9][0-9]?)(\.([0-9][0-9]?)?)?$/);

    let keyPress = event.key;

    if(!event.ctrlKey && (event.altKey || event.shiftKey)) {
      event.preventDefault();
      event.stopPropagation();
    }

    if(!event.ctrlKey && keyPress.length < 2) { //Make sure it just press 1 digit, avoid stuff like "backspace"
      if(keyPress == '0' || keyPress == '1' || keyPress == '2' || keyPress == '3' || keyPress == '4' || keyPress == '5'
      || keyPress == '6' || keyPress == '7' || keyPress == '8' || keyPress == '9' || keyPress == '.' ) {
        let test = this.someModel ? this.someModel.toString() + event.key: event.key;
        if (!regexp.test(test)) {
          event.preventDefault();
          event.stopPropagation();
        }
      } else {
        event.preventDefault();
        event.stopPropagation();
      }
    }
  }

validateRegex（事件：任意）{
设regexp=newregexp（/^（[0-9][0-9]？）（\.（[0-9][0-9]？）？）？）？$/）；
让keyPress=event.key；
如果（！event.ctrlKey&&（event.altKey | | event.shiftKey））{
event.preventDefault（）；
event.stopPropagation（）；
}
如果（！event.ctrlKey&&keyPress.length<2）{//确保只按1位，避免使用“backspace”之类的内容
如果（按键='0'| |按键=='1'| |按键=='2'| |按键=='3'| |按键=='4'| |按键=='5'
||按键=='6'| |按键=='7'| |按键=='8'| |按键=='9'| |按键=='。）{
让test=this.someModel？this.someModel.toString（）+event.key:event.key；
如果（！regexp.test（test））{
event.preventDefault（）；
event.stopPropagation（）；
}
}否则{
event.preventDefault（）；
event.stopPropagation（）；
}
}
}

现在，这验证了用户只需在圆点前后插入2位小数，也不允许圆点是他自己的。这段代码的问题在于，如果用户键入'99'，然后单击/箭头返回到前9，他将能够在开头插入9，从而破坏正则表达式<代码>事件只插入了密钥，不确定要插入到哪里

如果我不使用keydown/keypress，显示输入将已经更改，将进行验证，但UI将更改。在keydown中，用户界面仍然没有改变。我也不想阻止用户移动输入

现在是的，我可以用掩码解决这个问题，但是我得到的库掩码有问题，也有一些错误。可耻的是，我不能用其他的

这可以通过适当的事件来解决，或者在按键上以某种方式请求更改的值，或者可以创建我自己的掩码并解决这个问题？

html

ts

---

在输入下方向用户显示一个错误，显示他们键入的内容格式错误，这不是更好吗？然后，您可以在错误消息中向他们显示格式的错误。当他们纠正它时，错误就会消失。它的实现更简单（带有正则表达式的验证器），而且对最终用户来说也不那么恼火

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  value = '0';
  @ViewChild('input', { static: false }) input;

  onChange(value: string) {
    let regexp = /^([0-9][0-9]?)(\.([0-9][0-9]?)?)?$/;
    if (!value) {
      this.value = '';
    }
    if (!regexp.test(value)) {
      this.input.nativeElement.value = this.value
    } else {
      this.value = value;
    }

  }
}