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动态调整iframe高度的代码
Apr 10 Javascript
一个关于jqGrid使用的小例子(行按钮)
Nov 04 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
Nov 21 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
js实现不重复导入的方法
Mar 02 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
收集的php编写大型网站问题集
2007/03/06 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
laravel 实现划分admin和home 模块分组
2019/10/15 PHP
JavaScript国旗变换效果代码
2008/08/13 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
jquery foreach使用示例
2013/09/12 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
2016/01/18 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
原生JS实现天气预报
2020/06/16 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
python地震数据可视化详解
2019/06/18 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
python实现一个猜拳游戏
2020/04/05 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
银行员工考核评语
2014/12/31 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书