angular 表单验证器验证的同时限制输入的实现
angular里面对于表单验证,设置了很多指令。
也就是说不用自己写一些逻辑,直接绑定指令就行。
ng-app 启动你angular的模块
ng-controller 控制器,启动你angualr里面的逻辑代码作用在页面上
ng-options 循环你select里面的option标签,很好用的
ng-submit,表单提交执行的
novalidate 表单form配合后期检测的
ng-model 实现双数据绑定
ng-show 根据一定的逻辑实现显示
ng-cloak 绑定在节点上,防止节点渲染,angular指令闪烁
ng-class class类名根据你的逻辑,出现
ng-required 检测你的input为不为空
ng-pattern 正则表达式,绑定在input上面限制输入规范
ng-maxlength 最多输入限制
ng-minlength 最少输入限制
ng-disabled="myForm.$invalid" 脏检测
大概就需要这些指令了,大家不要喷我。谢谢
仔细回想以前使用响应式表单的验证器的时候,只是验证输入的值是否非法,而没有做对应的限制输入,比如当输入一串金额的时候只能输入数字,有这种需求的时候,我们该怎么做限制输入?用input来监听?用onModelChange来监听?我们可以直接写在验证器里面。
表单的验证分为模板驱动验证和响应式表单的验证,响应式表单添加自定义验证器非常方便,所以我们来直接以响应式表单的验证为研究基础。
首先构造基本的表单:
<form nz-form [formGroup]="validateForm"> <nz-form-item> <nz-form-label [nzSpan]="6" nzFor="code">GA Code</nz-form-label> <nz-form-control [nzSpan]="14"> <input nz-input name="code" formControlName="code" id="code"> </nz-form-control> </nz-form-item > </form>
validateForm: FormGroup; constructor( private fb: 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, }); } return null; }; }
将验证器使用在我们的响应式表单上:
this.validateForm = this.fb.group({ code: [33, [Validators.required, this.onlyNumber(), Validators.maxLength(6)]], });
运行程序,随便输入来测试测试,竟然是ok的?"color: #ff0000">formGroup的验证器
我们需要这样创建验证器,返回一个由formGroup构成的验证器:
onlyNumberValidator(formKeys: string[]): ValidatorFn { return (formGroup: FormGroup): ValidationErrors | null => { for (const key of formKeys) { const value = formGroup.controls[key].value; if (value && !/^\d*$/.test(value)) { formGroup.controls[key].setValue(value.replace(/[^0-9]/ig, ''), { onlySelf: true, }); } } return null; }};
使用:
this.validateForm = this.fb.group({ typeList: [[]], feeRate: [null, [Validators.required, Validators.pattern(/^[0-9]+(.[0-9]{1,2})?$/), Validators.max(0.999)]], code: [33, [Validators.required, Validators.maxLength(6)]], }, { validator: this.onlyNumberValidator(['code']), });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:angular 实现同步验证器跨字段验证的方法