组件来源地址: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,因为他可以做到实时监听,代码如下:
该方法就是上面图片中调用的方法。
如上,即实现了我们想要的结果。
另外,在代码编写过程中,我想要封装成一个统一的方法,这样只需要根据校验的字段去匹配相应的正则表达式即可。但是在获取校验字段时出问题。最终知道这些字段都在control中,是组件封装好的。
上面的keyValue就是我们需要的字段。