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 相关文章推荐
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
IE 当eval遇上function的处理
Aug 09 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
vue中touch和click共存的解决方式
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中SQL注入攻击与XSS攻击
2012/06/10 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
PDO::quote讲解
2019/01/29 PHP
PDO实现学生管理系统
2020/03/21 PHP
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
实例代码讲解jquery easyui动态tab页
2015/11/17 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
python实现的文件同步服务器实例
2015/06/02 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
优秀班主任经验交流材料
2014/06/02 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
2015年党员公开承诺事项
2015/04/27 职场文书
保护动物的宣传语
2015/07/13 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js
如何解决php-fpm启动不了问题
2021/11/17 PHP