angular 表单验证器验证的同时限制输入的实现
需积分: 7 157 浏览量
2020-10-17
04:42:46
上传
评论
收藏 72KB PDF 举报
angular 表单验证器验证的同时限制输入的实现表单验证器验证的同时限制输入的实现
表单验证是经常用到一个东西，这篇文章主要介绍了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的。
现在我们需要在验证的同时限制输入，比如只让用户输入数字，其他的一切都不可输入。
创建验证器，在验证的同时，限制输入创建验证器，在验证的同时，限制输入
资源评论
