angular 自定义验证器

几乎每个web应用都会用到表单，Angular 为我们提供了几个内置 validators (验证器)，但在实际工作中为了满足项目需求，我们经常需要为应用添加一些自定义验证功能。

angular内置验证器

  • required - 表单控件值非空
  • email - 表单控件值的格式是 email
  • minlength - 表单控件值的最小长度
  • maxlength - 表单控件值的最大长度
  • pattern - 表单控件的值需匹配 pattern 对应的模式（正则表达式）

自定义验证器

下面以常见的用户注册页面为例（模板驱动表单）



定义校验规则（本文简单举例），比如：
用户名：必填，不能重复
密码：必填
确认密码：必填，必须和密码相同
用户名：需要向服务端发出请求，判断是否已存在，需要自定义异步验证器
密码：使用angular内置验证器
确认密码：使用自定义同步验证器

异步验证器-用户名

验证器是一种特殊的指令，angular为异步验证器提供了依赖注入令牌：NG_ASYNC_VALIDATORS，至于为什么需要依赖注入，这与ngModel的实现机制有关，不是本文重点，不再叙述
上代码：

import { Directive, forwardRef } from '@angular/core';
import { AbstractControl, NG_ASYNC_VALIDATORS, Validator } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/first';
import { Observable } from 'rxjs/Observable';
 
@Directive({
  selector: '[validateUserName]',
  providers: [{
    provide: NG_ASYNC_VALIDATORS,
    useExisting: forwardRef(() => UserNameValidatorDirective),
    multi: true
  }]
})
export class UserNameValidatorDirective implements Validator {
  constructor(private http: HttpClient) {}
  validate(c: AbstractControl): Observable<any> {
    return c.valueChanges
      .debounceTime(1000)
      .distinctUntilChanged()
      .flatMap(() => {
        if (!c.value) {
          return Observable.throw({ 'msg': 'required' });
        }
        return this.http.get('url');
      })
      .catch(this.handleError)
      .first();
  }
  private handleError = (error: any) => {
    // 例子中不再对各种返回码做细分
    if (error.msg === 'required') {
      return Observable.of({ 'validateUserName': '用户名不能为空' });
    }
    if (error.status !== 404) {
      return Observable.of({ 'validateUserName': '用户名已存在' });
    }
    return Observable.of(null);
  }
}

validateUserName:验证器的指令名称
debounceTime：去抖
distinctUntilChanged：抑制重复值
flatMap：发送异步校验
first：只发射第一项
这些都是rxjs的基本语法，大家可以翻阅rxjs官网学习
思考：异步校验器返回的是一个Observable，它是冷的，为什么不需要订阅呢？
angular在AbstractControl类中进行了处理，通过_runAsyncValidator函数进行了订阅，查看源码

同步验证器-确认密码

angular为同步验证器提供了依赖注入令牌：NG_VALIDATORS

import { Directive, forwardRef, Input } from '@angular/core';
import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
@Directive({
  selector: `[validatePwdEqual]`,
  providers: [
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => PwdEqualValidatorDirective),
      multi: true
    }
  ]
})
export class PwdEqualValidatorDirective implements Validator {
  @Input() password: string;
  constructor() {
  }
  validate(c: AbstractControl): { [key: string]: any } {
    const v = c.value;
    if (v !== this.password) {
      return { validatePwdEqual: '两次密码不一致' };
    }
    return null;
  }
}

因为要校验两次密码是否相同，所以需要将密码通过input传入到验证器中，然后比较两次密码的值是否一致

使用验证器

使用之前需要在ngModule的declarations中声明验证器,
和正常的指令一样，在标签中使用即可

<form (ngSubmit)="onSubmit()" #registerForm="ngForm">
 
  <div>
 
    <input type="text" name="name" [(ngModel)]="user.name" validateUserName #name="ngModel" />
 
    <div [hidden]="name.valid || name.pristine">
 
      <span *ngIf="name?.errors?.validateUserName">{ {name.errors['validateUserName']} }</span>
 
    </div>
 
  </div>
 
  <div>
 
    <input type="password" name="pwd" [(ngModel)]="user.pwd" required #pwd="ngModel" (keyup)="validatePwdEqual(registerForm)"/>
 
    <div [hidden]="pwd.valid || pwd.pristine">
 
      <span *ngIf="pwd?.errors?.required">{ {pwd.errors['required']} }</span>
 
    </div>
 
  </div>
 
  <div>
 
    <input type="password" name="confirmpwd" [(ngModel)]="user.confirmPwd" validatePwdEqual [password]="user.pwd" #confirmpwd="ngModel"
 
    />
 
    <div [hidden]="confirmpwd.valid || confirmpwd.pristine">
 
      <span *ngIf="confirmpwd?.errors?.validatePwdEqual">{ {confirmpwd.errors['validatePwdEqual']} }</span>
 
    </div>
 
  </div>
 
  <button type="submit">注册</button>
 
</form>

点击试用，是否大功告成了呢，考虑这种场景：当你在密码框填入123，确认密码填入1234时，会给出两次密码不一致的提示，但是当你在两个密码框填入相同内容后，再修改第一个密码框，会发现确认密码框没有错误提示，这是因为验证器只能被绑定的组件触发。那么我们该怎么做呢，angular提供了setErrors方法来解决此问题，我们需要在第一个密码框加一个blur事件，将ngForm指令作为参数传入进去

validatePwdEqual(registerForm: any) {
    if (!registerForm.controls.confirmpwd.pristine) {
      if (this.user.pwd !== this.user.confirmPwd) {
        registerForm.controls.confirmpwd.setErrors({
          'validatePwdEqual': '两次密码不一致'
        });
      } else {
        return null;
      }
    }
  }

用户名的异步校验在高并发的场景下，并不准确，所以点击注册时，有可能之前验证成功的用户名已经存在，此时的错误提示也可以通过setErrors搞定。
如果同时使用了同步验证器和异步验证器，在同步验证器valid之前不会触发异步验证器。

错误显示

angular内置的验证器并没有返回错误文本内容，以required验证器举例，查看源码

required验证器在invalid情况下返回的是{'required': true}，但是我们的错误提示信息应该是不能为空/必填等等，所以就需要对html中的代码进行修改以满足我们的需求。

<div>
    <input type="password" name="pwd" [(ngModel)]="user.pwd" required #pwd="ngModel" (keyup)="validatePwdEqual(registerForm)"/>
    <div [hidden]="pwd.valid || pwd.pristine">
      <span *ngIf="pwd?.errors?.required">不能为空</span>
    </div>
</div>

但是验证器不止required，比如：pattern，minlength，required同时存在时，我们HTML中errors的处理就会比较复杂，而且用户名，密码，确认密码错误提示用到的代码基本相同，可以提炼一个错误提示的公共组件。

提炼错误提示组件

将错误提示封装成form-item-validate组件（参数为ngModel指令）

import { Component, OnInit, Input } from ;
@Component({
  selector: 'form-item-validate-error',
  template: '<span>{ {errorMsg} }</span>'
})
export class FormItemValidateErrorComponent {
  errorMsg: string;
  @Input()
  set error(err: any) {
    if (err) {
      if (typeof (err) === 'string') {
        this.errorMsg = err;
        return;
      }
      switch (err.key) {
        case 'required':
          this.errorMsg = '不能为空';
          break;
        case 'pattern':
          // 错误提示信息
          break;
        // 其他场景
        default:
          const msg = err.value === true ? err.key : err.value;
          this.errorMsg = msg;
      }
    }
  }
}
@Component({
  selector: 'form-item-validate',
  template: `
  <ng-container *ngIf="control.invalid && !control.pristine">
    <ng-container *ngFor="let error of control.errors | keyValue ; first as isFirst">
      <form-item-validate-error *ngIf="isFirst" [error]="error"></form-item-validate-error>
    </ng-container>
  </ng-container>
  `
})
export class FormItemValidateComponent {
  @Input() control: any;
}

keyValue管道：通过管道将errors的[key: string]: any结构转换为数组

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'keyValue', pure: true })
export class KeyvaluePipe implements PipeTransform {
    transform(input: Object) {
        const ret = [];
        if (!input) {
            return [];
        }
        const keys = Object.keys(input);
        keys.forEach((key: any) => {
            ret.push({ 'key': key, 'value': input[key] });
        });
        return ret;
    }
}

在模板中使用：将错误相关信息封装到组件中，可以使我们的业务代码变得更加简洁，不需要每个童鞋重复写这些复杂的显示逻辑

<form (ngSubmit)="onSubmit()" #registerForm="ngForm">
  <div>
    <input type="text" name="name" [(ngModel)]="user.name" validateUserName #name="ngModel" />
    <form-item-validate [control]="name"></form-item-validate>
  </div>
  <div>
    <input type="password" name="pwd" [(ngModel)]="user.pwd" required #pwd="ngModel" (keyup)="validatePwdEqual(registerForm)"/>
    <form-item-validate [control]="pwd"></form-item-validate>
  </div>
  <div>
    <input type="password" name="confirmpwd" [(ngModel)]="user.confirmPwd" validatePwdEqual [password]="user.pwd" #confirmpwd="ngModel"/>
    <form-item-validate [control]="confirmpwd"></form-item-validate>
  </div>
  <button type="submit">注册</button>
</form>

总结

  1. 使用验证器可以让我们的业务逻辑更简洁，将复杂的验证工作统统放到验证器中，特别是在大型表单场景下。
  2. 在项目中有时会有很多相同的验证规则，使用验证器更方便
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,761评论 5赞 460
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,953评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,998评论 0赞 320
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,248评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,130评论 4赞 356
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,145评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,550评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,236评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,510评论 1赞 291
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2赞 310
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,247评论 3赞 313
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,613评论 3赞 299
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2赞 342
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2赞 335