Angular在模板驱动表单中自定义校验器的方法


Posted in Javascript onAugust 09, 2017

引言

模板驱动表单相比较响应式表单可以少更少的代码做同样的事情,可也损失了自由度与更易测试,当然很多人并不在乎啦。

所以我相信很多人在编写Angular不自由自主去更倾向于模板驱动表单的写法。

表单最核心的是校验体验,在Angular中简直就是发挥到了极致,比如:required、min、max、pattern 等,这些原本是HTML DOM元素中的表述,而Angular默认实现了一整套的校验指令,比如:required 对应 RequiredValidator。

然后很多时候我们需要一些特殊的校验,比如:数据比较、远程校验等。那在模板驱动表单风格中我们要如何优雅的实现这样一个校验器呢?

一、Angular是如何校验?

一般在编写一个手机文本框可能是这样:

<input [(ngModel)]="user.mobile" #mobile="ngModel" autocomplete="off" type="tel" class="form-control" name="mobile" required maxlength="11">
<div *ngIf="mobile.errors">
  <p *ngIf="mobile.errors.required">手机号必填</p>
  <p *ngIf="mobile.errors.pattern">手机号格式不正确</p>
</div>

以上几行很友好的实现从必填项、格式进行校验,而这一切都是依靠 [(ngModel)] 统一采集,得以只需要利用一个模板引用变量访问到每个校验指令的错误信息。

1、[(ngModel)] 到底做了什么?

在解析这个问题前需要先了解一下 RequiredValidator 是如何定义的。

@Directive({
 providers: [{
   provide: NG_VALIDATORS,
   useExisting: forwardRef(() => RequiredValidator),
   multi: true
  }]
})
export class RequiredValidator {}

只看最核心向 NG_VALIDATORS 标识符注册一个 RequiredValidator 指令。这样就可以使 ngModel 指令中注入 NG_VALIDATORS 后就能得到这个指令对象。

ngModel 我把它简化了一下:

export class NgModel extends NgControl {
  constructor(@Inject(NG_VALIDATORS) validators: Array<Validator|ValidatorFn>) {}
  
  get validator(): ValidatorFn|null {
    // 各种校验并返回结果
  }
}

有关更多ng_model.ts可以深入阅读源代码。

Angular会在每一次表单值变更时,对所有的表单中已经安装的校验器进行一次遍历。

二、编写一个校验器

诚如 required 校验器一样,依然是把自定义校验器挂到 NG_VALIDATORS 当中。假如我们希望手机文本框只能输入 159 开头的一个校验器。

定义Directive

@Directive({
  selector: '[user-mobile]',
  exportAs: 'userMobile',
  providers: [{
    provide: NG_VALIDATORS,
    useExisting: forwardRef(() => UserMobileDirective),
    multi: true
  }]
})
export class UserMobileDirective {}

一个非常普通的指令定义方法,只是多了一个将 UserMobileDirective 注册到 NG_VALIDATORS 标识符当中而已。别问我为什么,一种约定。

export class UserMobileDirective implements Validator {
  validate(c: AbstractControl): { [key: string]: any; } {
    let value: string = c.value || '';
    if (!value.startsWith('159')) {
      return {
        mobile: {
          msg: '手机号必须是159开头',
          actualValue: value
        }
      };
    }
    return null;
  }
}

只需要实现 Validator 接口的 validate 方法即可。

从 c 中获取DOM值,当遇到非 159 开头时,返回一个用于表述消息的对象即可,否则返回一个 null。这个对象会被统一采集在 ngModel.errors 对象下面。故而,只需要在DOM元素加上 user-mobile 指令即可。

<input user-mobile [(ngModel)]="user.mobile" #mobile="ngModel" autocomplete="off" type="tel" class="form-control" name="mobile" id="mobile" required maxlength="11">
<div *ngIf="mobile.errors">
  <p *ngIf="mobile.errors.required">手机号必填</p>
  <p *ngIf="mobile.errors.mobile">{{mobile.errors.mobile.msg}}</p>
</div>

接口还包括一个 registerOnValidatorChange 可选方法,当某些其它外部属性的变更时,允许重新手动触发校验。

三、异步校验器

如果说用户手机校验器需要检查手机是否为黑名单的情况下,正常黑名单数据都存在远程当中。这样情况下需要发送HTTP请求,而这一过程就是异步。

Angular针对这类异步校验有独立的另一个标识符,即:NG_ASYNC_VALIDATORS,而其它代码都是相通的。

@Directive({
  selector: '[user-async]',
  exportAs: 'userAsync',
  providers: [{
    provide: NG_ASYNC_VALIDATORS,
    useExisting: forwardRef(() => UserAsyncDirective),
    multi: true
  }]
})
export class UserAsyncDirective implements Validator {
  validate(c: AbstractControl): Observable<any> {
    return c.valueChanges
        // 去抖
        .debounceTime(300)
        // 抑制重复值
        .distinctUntilChanged()
        // 1、可以使用flatMap进行远程校验
        // .flatMap(value => value)
        // 2、本地模拟判断
        .map((value: string) => {
          if ([ '15900000001', '15900000002' ].includes(value)) {
            return {
              mobile: {
                msg: '手机号为黑名',
                actualValue: value
              }
            }
          }
          return null;
        })
        .first();    
  }
}

除了 NG_ASYNC_VALIDATORS 核心的结构完全没有变动。

而对于 validate 方法返回的是一个 Observable 类型,利用对 valueChanges 的订阅可以制作一些像去抖动作。

而最后必须使用 first() 做为结尾,原因每一次校验,对于结果而言只允许一个。

结论

本章介绍的是如何对模板驱动表单创建自定义校验器,它相比较响应式表单自定义校验器略为复杂一些。但是实际运用中,我们不应该只为某个构建表单风格做一种自定义校验器,应该二者是共存的。

比如上面 159 开头的示例。更合理的编写方式应该是将校验逻辑独立:

export class MyValidators {
  static checkMobile(value: string): ValidationErrors|null {
    return !value.startsWith('159') ? { mobile: { msg: '手机号必须是159开头' } } : null;
  }
}
// 校验器类
export class UserMobileDirective implements Validator {
  validate(c: AbstractControl): { [key: string]: any; } {
    let value: string = c.value || '';
    return MyValidators.checkMobile(value);
  }
}

这样,同一个校验器,不管是模板驱动表单还是响应式表单,都能是通用的。

总结

以上所述是小编给大家介绍的Angular在模板驱动表单中自定义校验器的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
深入理解javascript中concat方法
Dec 12 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 #Javascript
js中less常用的方法小结
Aug 09 #Javascript
利用JS做网页特效_大图轮播(实例讲解)
Aug 09 #Javascript
基于Vue实例对象的数据选项
Aug 09 #Javascript
react-native之ART绘图方法详解
Aug 08 #Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 #jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 #jQuery
You might like
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
PHP curl使用实例
2015/07/02 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
js中new一个对象的过程
2017/02/20 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
python批量同步web服务器代码核心程序
2014/09/01 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
python验证码图片处理(二值化)
2019/11/01 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
日语专业个人的求职信
2013/12/03 职场文书
班长演讲稿范文
2014/04/24 职场文书
护士感人事迹
2014/05/01 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
高中班主任评语
2014/12/30 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL