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 相关文章推荐
javascript编码的几个方法详细介绍
Jan 06 Javascript
页面右下角弹出提示框示例代码js版
Aug 02 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
js实现微信分享代码
Oct 11 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
Vue+Element实现网页版个人简历系统(推荐)
Dec 31 Javascript
javascript函数式编程基础
Sep 15 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实现处理输入转义字符的代码
2015/11/08 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
js Flash插入函数免激活代码
2009/03/31 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
微信小程序 开发之顶部导航栏实例代码
2017/02/23 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
Python中文件操作简明介绍
2015/04/13 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
python实现一组典型数据格式转换
2018/12/15 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
C#基础面试题
2016/10/17 面试题
生日邀请函范文
2014/01/13 职场文书
网管求职信
2014/03/03 职场文书
空气环保标语
2014/06/12 职场文书
大学生工作自荐书
2014/06/16 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
学校重阳节活动总结
2015/03/24 职场文书
公司出纳岗位职责
2015/03/31 职场文书
运动会广播稿300字
2015/08/19 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
Flask搭建一个API服务器的步骤
2021/05/28 Python
php双向队列实例讲解
2021/11/17 PHP