几乎每个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>
总结
- 使用验证器可以让我们的业务逻辑更简洁，将复杂的验证工作统统放到验证器中，特别是在大型表单场景下。
- 在项目中有时会有很多相同的验证规则，使用验证器更方便
网友评论