angular 表单验证器验证的同时限制输入的实现

2023-08-24 17:46:05 305

angular里面对于表单验证，设置了很多指令。

也就是说不用自己写一些逻辑，直接绑定指令就行。

ng-app 启动你angular的模块

ng-controller控制器，启动你angualr里面的逻辑代码作用在页面上

ng-options 循环你select里面的option标签，很好用的

ng-submit，表单提交执行的

novalidate 表单form配合后期检测的

ng-model 实现双数据绑定

ng-show根据一定的逻辑实现显示

ng-cloak绑定在节点上，防止节点渲染，angular指令闪烁

ng-classclass类名根据你的逻辑，出现

ng-required检测你的input为不为空

ng-pattern正则表达式，绑定在input上面限制输入规范

ng-maxlength最多输入限制

ng-minlength最少输入限制

ng-disabled="myForm.$invalid"脏检测

大概就需要这些指令了，大家不要喷我。谢谢

仔细回想以前使用响应式表单的验证器的时候，只是验证输入的值是否非法，而没有做对应的限制输入，比如当输入一串金额的时候只能输入数字，有这种需求的时候，我们该怎么做限制输入？用input来监听？用onModelChange来监听？我们可以直接写在验证器里面。

表单的验证分为模板驱动验证和响应式表单的验证，响应式表单添加自定义验证器非常方便，所以我们来直接以响应式表单的验证为研究基础。

首先构造基本的表单：



GACode

validateForm:FormGroup;
constructor(
privatefb:FormBuilder,
){
}
ngOnInit(){
this.validateForm=this.fb.group({
code:[33,[Validators.required,Validators.maxLength(6)]],
});
}

我们创建的这个响应式表单是要验证一个谷歌验证的「code」字段，并给与了两个验证器，一个必填验证，一个验证长度最长是6位。运行起来后，我们输入的如果超过6位范围输入框就会变成红色，这是OK的。

现在我们需要在验证的同时限制输入，比如只让用户输入数字，其他的一切都不可输入。

创建验证器，在验证的同时，限制输入

我们使用正则表达式来判断。首先，判断一个字符串是否是全数字：/^\d*$/.test(value)。然后将有「杂质」的字符串修正为纯数字：value.replace(/[^0-9]/ig,'')。

思路是，创建验证器，当有输入值的时候，验证器运行，判断是否是全数字，如果不是就进行替换。我们可以得到如下的验证器：

onlyNumber():ValidatorFn{
return(control:AbstractControl):{[key:string]:any}|null=>{
//value有值且如果值包含非数字，就需要替换
if(control.value&&!/^\d*$/.test(control.value)){
control.setValue(control.value.replace(/[^0-9]/ig,''),{
emitEvent:false,
emitViewToModelChange:false,
});
}
returnnull;
};
}

将验证器使用在我们的响应式表单上：

this.validateForm=this.fb.group({
code:[33,[Validators.required,this.onlyNumber(),Validators.maxLength(6)]],
});

运行程序，随便输入来测试测试，竟然是ok的？

angular 表单验证器验证的同时限制输入的实现

热门推荐

随机推荐