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

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

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

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

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

<nz-input-numberformControlName="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)}

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

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

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

该方法就是上面图片中调用的方法。

如上，即实现了我们想要的结果。

另外，在代码编写过程中，我想要封装成一个统一的方法，这样只需要根据校验的字段去匹配相应的正则表达式即可。但是在获取校验字段时出问题。最终知道这些字段都在control中，是组件封装好的。

上面的keyValue就是我们需要的字段。

/gosenkle/article/details/80110853