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的？😯（那我前几次的时候是做了什么骚造作让浏览器堆栈溢出的？？？）
emmmmmmmm。。。。。。我上次确实是让浏览器堆栈溢出了，这次正常反而很奇怪了。不影响，我们来看看setvalue(value, options)的options几个配置参数吧：
首先，对于onlyself来讲，如果我们有跨字段的验证的话，设置这个为false就不影响表单层次的验证器。emitevent是对statuschange和valechanges两个observable的影响，一般我们用observable的方式监听字段的值变化时有用到。emitmodeltoviewchange配置是触发onchange来更新视图的，如果如果设置为false的话，无论我们怎么更新字段的值，是不会显示在页面上的。emitviewtomodelchange触发ngmodelcahnge时间更新模型，但好像这个参数设置为false并没什么用。
得得得，好的就行。
假如我们需要在验证的条件也和其他表单字段有关系怎么办？那我们需要formgroup级的验证。
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']),
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
Angular8引入百度Echarts进行图表分析的实现代码
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
angular inputNumber指令输入框只能输入数字的实现
网友评论