Angular--Zorro中InputNumber数字输入框禁止输入非法字符（英文，标点等）

原創

2020-02-21 06:33

组件来源地址：https://ng.ant.design/components/input-number/zh

我在项目中遇到的问题：使用nz-input-number组件，若用户输入非法字符，input框立马变为红色，表示警告。我第一反应就是一旦监听到用户输入了非法字符（除数字之外的），立马给予警告，同时input框就是这样实现的校验，但是在实际操作的过程中就会发现，我们无法实时监听用户的输入行为。

使用过该组件的用户会知道，即便该组件是数字框，但是依然可以输入英文及其他除数字之外的字符，只是在失焦的时候，input中的值会变为就近输入过的整数值，这一点官网也有介绍。同时有一点，我想对该组件进行校验的时候，并不能在用户输入的过程中做到实时监听用户的输入。

在解决过程中，想到用正则表达式限制用户输入除数字之外的其他字符。方法如下：

<nz-input-number
    formControlName="pwd_login_timeout"
    [nzMin]="0"
    [nzMax]="120"
    [nzStep]="1"
    id="timeout"
    [(ngModel)]="pwdLoginTimeout"
    (ngModelChange)="changeMethod()"
    (input)="onInput($event)"
></nz-input-number>

onInput($event) {
    // console.log($event)
    if (!$event) {
      return;
    }
    const target = $event.target;
    console.log(target)
    const regexp = /^(\d)+$/;
    target.value = target.value.replace(regexp, '');
    console.log(target.value)
  }

因为在方法中，对用户的输入进行了校验，并且校验不成功就会替换为空，因此可以做到禁止用户输入非法字符。但是这一点并不能真正解决我的需求。因此，还需要进行校验，https://angular.cn/guide/form-validation即angular的表单验证。当然这两部分的结合可以实现。但是我在使用过程中，校验会出现问题。

上述问题的第二种方法其实可以用指令的方式解决，但是我还没有实践，若真正实践了之后，会将代码附上。

其实我们最终的解决方案是将nz-input-number换成了input，因为他可以做到实时监听，代码如下：