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

站长资源 2024/11/26 佚名

2 0 1

引言

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

所以我相信很多人在编写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') "color: #ff0000">总结
以上所述是小编给大家介绍的Angular在模板驱动表单中自定义校验器的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

angular模板驱动表单,angular自定义校验器

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年11月26日

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

vuejs父子组件之间数据交互详解

浅谈react+es6+webpack的基础配置

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

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接