Angular2 自定义validators
来源:互联网 发布:bilibili 知乎 编辑:程序博客网 时间:2024/06/05 14:28
angular 当需要form表单需要验证时,angular自带了许多校验器,但是很多时候自带的无法满足业务需求,这时候就需要自定义的校验器
定义一个validator
定义validator 需要实现 ValidatorFn 接口
源码:
export interface ValidatorFn { (c: AbstractControl): ValidationErrors | null;}
接收一个 AbstractControl 返回 ValidationErrors 或者null
ValidationErrors 源码
export declare type ValidationErrors = { [key: string]: any;};
这其实就是返回一个 key value 类型的对象,这个对象会在验证信息不通过的时候赋值给 formControl.errors
写好的Validator 需要在创建FormControl作为参数传入
FormControl 的构造器源码
export declare class FormControl extends AbstractControl { constructor(formState?: any, validator?: ValidatorFn | ValidatorFn[] | null, asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null);
下面是个简单的例子(校验邮箱地址):
- 定义一个返回 ValidatorFn 接口的方法
static EMAIL_REG = new RegExp('\\w[-\\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}');static email(): ValidatorFn { return (control: AbstractControl): { [key: string]: any } => { ① if (!EMAIL_REG.test(control.value)) { ② return { ③ errMsg: '请输入正确的邮箱地址' }; } return {}; ④ }; }
① 方法返回 ValidatorFn 的实例
② 判断是否符合邮箱正则表达式
③ 如果不符合 返回一个 ValidationErrors 对象,errMsg 作为错误信息输出 (这里也可以再加一个 布尔型的作为判断)
④ 如果校验成功返回一个空的对象
传入校验器
email = new FormControl('', email())
模板:
<p *ngIf = "!email.valid && email.touched">{{email.errors.errMsg}}</p>
当邮箱格式不正确时 这里就会显示 ‘请输入正确的邮箱地址’
至此一个简单的校验器就完成了。
如果想比较2个form的值是否相等的话只需要做一些小的改变
static EMAIL_REG = new RegExp('\\w[-\\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}');static email(emailForm: FormControl): ValidatorFn { ① return (control: AbstractControl): { [key: string]: any } => { if (emailForm.value !== control.value ) { return { errMsg: '请输入相同邮箱地址' }; } return {}; }; }
① 只需要在这里传入另一个需要做对比的 formControl 即可
email = new FormControl('', email())email2 = new FormControl('', email(email))
阅读全文
1 0
- Angular2 自定义validators
- 如何自定义Angular2 管道
- Angular2自定义分页组件
- Angular2-自定义指令@Directive
- 【angular2】(2)angular2自定义组件示例
- angular2.0如何自定义管道?
- angular2中自定义window对象
- Angular2 指令—自定义指令
- Angular2 指令—自定义指令
- HTML Validators
- GWT validators
- validators-default
- ionic2 angular2自定义pipe ,orderby实现排序
- Angular2踩坑之自定义Pipe管道
- angular2
- angular2
- Angular2
- angular2
- CombineMeshes unity网格合并后位置会变
- SpringMVC 将复杂对象以json格式返回前端
- Journal Storage Directory not formatted
- 关于html的几个总结
- JavaWeb: 事务与数据库连接池
- Angular2 自定义validators
- URL重写、Cookie、Session技术
- gRPC 内容介绍
- 定义员工类employee ,员工有姓名,年龄,工号属性, 员工有工作的方法, 键盘录入三组数据, 数据格式(姓名,年龄,工号) 例如:张三,23,9527; 通过数据,创建员工对象, 然后通过对
- java中IO文件复制两种方法及对比
- 算法作业:证明题(1)-- 8.3
- 【剑指offer】题37:链表公共节点
- P1273 有线电视网
- POJ 1077 Eight(神奇的八数码问题)