Angular2 自定义validators的实现方法


Posted in Javascript onJuly 05, 2017

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))

以上所述是小编给大家介绍的Angular2 自定义validators的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
让ie运行js时提示允许阻止内容运行的解决方法
Oct 24 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
简单的jQuery入门指引
Jul 28 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
vue+vux实现移动端文件上传样式
Jul 28 Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
vue中echarts引入中国地图的案例
Jul 28 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 #Javascript
使用angular帮你实现拖拽的示例
Jul 05 #Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 #Javascript
jquery拖动改变div大小
Jul 04 #jQuery
JavaScript无操作后屏保功能的实现方法
Jul 04 #Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 #Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 #Javascript
You might like
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
图片完美缩放
2006/09/07 Javascript
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
高中自我鉴定
2013/12/20 职场文书
精彩的英文自荐信
2014/01/30 职场文书
材料加工工程求职信
2014/02/19 职场文书
法律顾问服务方案
2014/05/15 职场文书
食堂标语大全
2014/06/11 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js