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

引言

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

所以我相信很多人在编写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在模板驱动表单中自定义校验器的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • AngularJS入门教程之表单校验用法示例

    本文实例讲述了AngularJS表单校验用法.分享给大家供大家参考,具体如下: 表单数据的校验对于提高WEB安全性意义不大,因为服务器接收到的请求不一定来自我们的前端页面,有可能来自别的站点,黑客可以自己做一个表单,把数据提交到我们的服务器(即跨站伪造请求),这样就绕过了前端页面的校验.如果对HTTP协议比较熟,甚至还可以在程序中手动构造一段HTTP请求发到服务器,所以服务器端的数据校验绝对是必不可少的. WEB前端数据校验的意义在于改善用户体验,用户不用等到將数据提交到服务器后才知道哪些数据是

  • AngularJs表单校验功能实例代码

    废话不多说了,具体代码如下所示: <!DOCTYPE html> <html ng-app="angularFormCheckModule"> <head> <meta charset="UTF-8"> <title>angular表单校验</title> <link rel="stylesheet" href="../css/bootstrap.min.cs

  • angular4中关于表单的校验示例

    本章中介绍响应式表单的创建及表单输入值的校验,对于模板表单就略过. 一.使用响应式表单的步骤 1.在模块(一般是app.module.ts)中引入ReactiveFormsModule 2.在组件的ts文件中使用响应式表单 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms'; export class ReactiveFormComponent implements OnInit { p

  • Angular模板表单校验方法详解

    本文实例为大家分享了Angular模板表单校验的方法,供大家参考,具体内容如下 1. 创建指令 ng g directive directives/mobileValidator 2. html <form #myForm="ngForm" (ngSubmit)="onSubmit2(myForm.value, myForm.valid)"> <div> <h3>登录</h3> </div> <div

  • Angularjs使用指令做表单校验的方法

    前言 通常,使用angular做表单验证,一般都是把验证规则单独写为service,然后通过依赖注入的方式调用.在个别情况下,例如用户注册表单,需要根据用户输入给出不同提示信息,使用service略显不合适宜,所以可以采用指令的方式. 简易表单 如下为一个简易表单,有四项提示信息,依据状态呈现.校验规则为数字,大写字母,小写字母至少出现两项,通过正则配合ng-pattern能够实现相同的效果,此处仅为引入指令校验,不做深究.其中,user-validator为自定义指令. <form class

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

    引言 模板驱动表单相比较响应式表单可以少更少的代码做同样的事情,可也损失了自由度与更易测试,当然很多人并不在乎啦. 所以我相信很多人在编写Angular不自由自主去更倾向于模板驱动表单的写法. 表单最核心的是校验体验,在Angular中简直就是发挥到了极致,比如:required.min.max.pattern 等,这些原本是HTML DOM元素中的表述,而Angular默认实现了一整套的校验指令,比如:required 对应 RequiredValidator. 然后很多时候我们需要一些特殊的

  • Angular实现模版驱动表单的自定义校验功能(密码确认为例)

    HTML5原生的表单校验属性(必填,长度限制,取值间隔,正则表达式等等)可以满足普通的校验需求,但是有些场景必须用到自定义校验,比如注册时的密码确认,有比对关系的时间/数值选择, 需要到请求到服务端取值验证等等···这里以密码确认为例进行说明. 指令开发 表单的验证状态是通过 formContro l的 errors 属性反馈出来的,所以基本的思路肯定就是需要添加校验规则,然后将验证结果添加到formControl实例的errors属性中.那么问题来了,模版驱动表单的控制都是在HTML模版中完成

  • angular中两种表单的区别(响应式和模板驱动表单)

    angular的表单 angular的表单分为两种,一种是响应式的表单,另一种是模板驱动表单.使用'@angular/forms'库中的FormGroup, FormControl,FormArray,FormBuilder 等类构建出的数据对象就是响应式的表单,在响应式的表单中,我们会在数据源里面进行各种操作,像添加校验等,在html文件中使用 formGroup,formGroupName,formControlName等将数据和视图进行绑定(需要引入ReactiveFormsModule)

  • vue表单自定义校验规则介绍

    如下所示: <div id="app"> <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"

  • Vue系列之Element UI表单自定义校验规则

    目录 一.表单效验规则的使用 1.自定义效验规则介绍 2.绑定效验方法 3.添加效验 4.效验判断 5.清除效验规则 二.常见表单效验规则 (一)pattern验证 (二)validator.js文件中常见的验证方法 总结 一.表单效验规则的使用 1.自定义效验规则介绍 是否必填: required: true  ||   fasle 效验消息提示:message: "提示信息" 效验触发方式:trigger:"change"  ||  "blur&quo

  • Angular2表单自定义验证器的实现

    本文主要给大家介绍如何判断验证器的结果.在这里,我们就来看看怎样实现一个自定义的验证器. 目标 我们要实现一个验证手机号的验证器,使用的实例还是基于之前的文章里面的实例,也就是用户信息输入的表单页面.我们在手机号的元素上添加一个验证手机号的验证器.然后,如果手机号验证失败,就显示一个错误,页面如下: 这部分教程的代码可以从github获取: git clone https://github.com/Mavlarn/angular2-forms-tutorial 如果要运行,进入项目目录,运行下面

  • zf框架的校验器使用使用示例(自定义校验器和校验器链)

    复制代码 代码如下: <?phprequire_once("Zend/Loader.php");//引入校验器类和效验器的功能类(Int),与自定义接口类;Zend_Loader::loadClass('Zend_Validate');Zend_Loader::loadClass('Zend_Validate_Int');Zend_Loader::loadClass('Zend_Validate_Interface');//增加自定义校验器功能类(GongBeiNum)[公倍数]

  • jQuery中设置form表单中action值的实现方法

    html代码: <form id="myFormId" name="myForm" action="" method="post"> <input type="hidden" id="inParam" name="inParam" /> <input type="hidden" id="tstype"

  • Hibernate validator使用以及自定义校验器注解

    JSR-303 是 JAVA EE 6 中的一项子规范,叫做 Bean Validation,用于对 Java Bean 中的字段的值进行验证.Hibernate Validator则是Hibdernate提供的一种对该规范的实现. --即Hibernate Validator是用来做参数校验. 使用Hibernate Validator提供的注解进行参数校验 注解 释义 @Null 必须为null @NotNull 不能为null @AssertTrue 必须为true @AssertFals

  • thinkPHP5框架自定义验证器实现方法分析

    本文实例讲述了thinkPHP5框架自定义验证器实现方法.分享给大家供大家参考,具体如下: 普通的验证器手册上已经很详细,我们讲解一下如何自定义一个验证器 首先我们在模块目录下建立validata文件夹 然后在里面建立一个类,取名为IdMustInt.php 代码如下:注意,我的模块名为api,所以命名空间如下 保护属性$rule为官方规定,不能改变,其实验证规则require都是封装好的函数名,所以我们也建立一个方法,方法名填写在验证规则后面即可 namespace app\api\valid

随机推荐