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系列(12) 变量对象(Variable Object)
Jan 16 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
jquery实现图片切换代码
Oct 13 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
vue如何实现动态加载脚本
Feb 05 Javascript
Javascript Web Worker使用过程解析
Mar 16 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
openPNE常用方法分享
2011/11/29 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
新浪的图片新闻效果
2007/01/13 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
jquery移动节点实例
2015/01/14 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
jQuery实现table中的tr上下移动并保持序号不变的实例代码
2016/07/11 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
[03:12]完美世界DOTA2联赛PWL DAY7集锦
2020/11/06 DOTA
python网络编程之读取网站根目录实例
2014/09/30 Python
利用python批量检查网站的可用性
2016/09/09 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
家长通知书教师评语
2014/04/17 职场文书
单位活动策划方案
2014/08/17 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
学习三严三实心得体会
2014/10/13 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
学校党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android