使用内建的验证规则
动态调整验证规则
自定义验证器
自定义验证器 (支持参数)
跨字段验证
基础知识
内建验证规则
Angular 提供了一些内建的 validators，我们可以在 Template-Driven 或 Reactive 表单中使用它们。
目前 Angular 支持的内建 validators 如下：
required - 设置表单控件值是非空的。
email - 设置表单控件值的格式是 email。
minlength - 设置表单控件值的最小长度。
maxlength - 设置表单控件值的最大长度。
pattern - 设置表单控件的值需匹配 pattern 对应的模式。
示例
this.signupForm = this.fb.group({ userName: ['', [Validators.required, Validators.minLength(3)]], email: ['', [Validators.required, Validators.pattern('[a-z0-9._%+_]+@[a-z0-9.-]+')]] });
动态调整验证规则
myControl.setValidators(Validators.required); myControl.setValidators([Validators.required, Validators.maxLength(6)]); myControl.clearValidators(); myControl.updateValueAndValidity();
自定义验证器
function myCustomValidator(c: AbstractControl): {[key: string]: boolean} | null { if(somethingIsWrong) { return { 'myvalidator': true}; } return null; }
自定义验证器 (支持参数)
function myCustomValidator(param: any): ValidatorFn { return (c: AbstractControl): {[key: string]: boolean} | null { if(somethingIsWrong) { return { 'myvalidator': true}; } return null; } }
跨字段验证
emailMatcher
function emailMatcher(c: AbstractControl) { let emailControl = c.get('email'); let confirmControl = c.get('confirmEmail'); if (emailControl.pristine || confirmControl.pristine) { return null; } return emailControl.value === confirmControl.value ? null : { 'match': true }; }
emailGroup
ngOnInit(): void { this.signupForm = this.fb.group({ userName: ['', [Validators.required, Validators.minLength(6)]], emailGroup: this.fb.group({ email: ['', [Validators.required, Validators.email]], confirmEmail: ['', [Validators.required]], }, { validator: emailMatcher }) });
在介绍表单验证前，我们来看一下目前页面的显示效果：
表单验证
表单的内建验证规则，前面章节已经介绍过了，接下来我们来介绍在表单中如何 "动态调整验证规则" 。
动态调整验证规则
为了演示 "动态调整验证规则" 的功能，我新增了两个控件：
radio - 用于让用户设置是否开启手机登录。
tel - 当用户开启手机登录功能，用于让用户输入手机号码。
当用户开启手机登录功能，手机号码对应控件的验证规则，必须是必填且格式为合法的手机号码。当用户不开启手机登录功能时，手机号码对应控件将不是必填的。
新增 radio 控件
<div> <div> 开启手机登录 <label> <input type="radio" value="1" formControlName="enableMobile"> 是 </label> <label> <input type="radio" value="0" formControlName="enableMobile"> 否 </label> </div> </div>
新增 tel 控件
<div [ngClass]="{'has-error': (mobile.touched || mobile.dirty) && !mobile.valid }"> <label for="mobileId">手机号码</label> <div> <input type="text" placeholder="请输入手机号码" formControlName="mobile"/> <span *ngIf="(mobile.touched || mobile.dirty) && mobile.errors"> <span *ngIf="mobile.errors.required"> 请输入手机号码 </span> <span *ngIf="mobile.errors.minlength"> 手机号码格式不正确 </span> </span> </div> </div>
动态调整验证规则功能
ngOnInit(): void { ... this.signupForm.get('enableMobile').valueChanges .subscribe(value => this.checkMobile(value)); } checkMobile(enableMobile: string): void { const mobileControl = this.signupForm.get('mobile'); enableMobile === "1" ? mobileControl.setValidators([Validators.required, Validators.pattern('1(3|4|5|7|8)\\d{9}')]) : mobileControl.clearValidators(); mobileControl.updateValueAndValidity(); }
介绍完如何动态调整验证规则，接下来我们来介绍如何 "自定义验证器"。
自定义验证器
为了演示 "自定义验证器" 的功能，我新增了一个控件：
number - 用于让用户设置是年龄信息。
当让用户手动输入年龄信息时，我们需要设置一个有效的年龄范围，比如 (18 - 120)。此时我们就需要通过自定义验证器来实现上述功能。
新增 number 控件