本节我们为新增组件增加一些验证。在正式编码之前，为了使用组件与我们有个更好的交互，在单元测试的代码中的最后一行启动自动检测变更： ```typescript +++ b/first-app/src/app/student/add/add.component.spec.ts @@ -32,5 +32,7 @@ describe('student -> AddComponent', () => { expect(component).toBeTruthy(); getTestScheduler().flush(); fixture.detectChanges(); + + fixture.autoDetectChanges(); }); }); ``` ## 加入验证器 然后给名称、学号、班级分别加一个`required`验证器： ```typescript +++ b/first-app/src/app/student/add/add.component.ts @@ -1,5 +1,5 @@ import {Component, OnInit} from '@angular/core'; -import {FormControl, FormGroup} from '@angular/forms'; +import {FormControl, FormGroup, Validators} from '@angular/forms'; @Component({ selector: 'app-add', @@ -8,11 +8,11 @@ import {FormControl, FormGroup} from '@angular/forms'; }) export class AddComponent implements OnInit { formGroup = new FormGroup({ - name: new FormControl(), - number: new FormControl(), + name: new FormControl('', Validators.required), + number: new FormControl('', Validators.required), phone: new FormControl(), email: new FormControl(), - clazzId: new FormControl() + clazzId: new FormControl(null, Validators.required) }); constructor() { ``` 测试一校验正常。 ## 自定义验证器 一般情况下，只验证是否为空是满足不了实际的需求的，比如我们在这对手机号的验证、邮箱的验证。Angular支持自定义`FormControl`验证器，来帮助我们实现Angular内置验证器无法满足的需求。比如当前需要一定验证手机号是否正确的验证器。 自定义验证器与自定义`FormControl`有着相通之处：都需要符合某种规范。自定义`FormControl`使用了实现接口来达到符合规范的目的，自定义验证器使用返回特定类型来达到符合规范的目的。 在自定义验证器时，我们也像Angular一样，把所有的验证器放到一个类中。同时由于表单验证器可供所有的项目使用，所以我们将其建立在项目的根目录下，至于名字我们将其命名为`YzValidators`: ```bash panjie@panjies-iMac app % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app panjie@panjies-iMac app % ng g class YzValidators CREATE src/app/yz-validators.spec.ts (179 bytes) CREATE src/app/yz-validators.ts (30 bytes) ``` 空的类文件`YzValidators`如下所示： ```typescript export class YzValidators { } ``` ### 验证手机号 然后我们在该方法中建立一个用于手机号验证的静态方法`phone`: ```typescript import {AbstractControl, ValidationErrors, ValidatorFn} from '@angular/forms'; export class YzValidators { /** * 验证手机号 */ 👉static phone(control: AbstractControl①): ValidationErrors② | null { return null; ③ } } ``` - 👉方法以`static`关键字标识 - 该方法将当前`FormControl`做为参数传入，所以①处的类型必须是`AbstractControl` - 该方法的返回值类型必须是`ValidationErrors | null`，该返回值类型决定了其是一个表单验证器 - ③当验证通过时，将返回nulll；验证不通过时，将返回`ValidationErrors`类型的数据 > 实际上`phone()`方法是`ValidatorFn`的实现。 ### 应用验证器 自定义验证器的用法与Angular内置验证器的用法完全相同: ```typescript +++ b/first-app/src/app/student/add/add.component.ts @@ -11,7 +11,7 @@ export class AddComponent implements OnInit { formGroup = new FormGroup({ name: new FormControl('', Validators.required), number: new FormControl('', Validators.required), - phone: new FormControl(), + phone: new FormControl('', YzValidators.phone), email: new FormControl(), clazzId: new FormControl(null, Validators.required) }); ``` 在V层中加入测试的代码： ```html <div class="col-sm-10"> <input type="text" class="form-control" formControlName="phone"> {{formGroup.get('phone').invalid}} <small class="text-danger" *ngIf="formGroup.get('phone').invalid"> 手机号格式不正确 </small> </div> ``` 此时由于验证方法`phone()`的返回值为null，所以无论在手机号一栏中输入什么内容，都不会报错：  假设把返回值改成非null，则无论输入的什么样的值该验证器都会报错： ```typescript static phone(control: AbstractControl): ValidationErrors | null { return {phone: '手机号格式错误'}; } ```  ## 调用时机 每当`FormControl`有数据变更时，对应的验证器都会被执行一次： ```typescript static phone(control: AbstractControl): ValidationErrors | null { console.log('phone is called'); return {phone: '手机号格式错误'}; } ``` 此时当我们变更表单中的手机号时，在控制台中将反复打印相同的日志：  ## 完成功能 既然每次数据改变都会调用一次`phone()`方法，那么在`phone()`方法中我们获取当前的手机号，然后使用相关的方法验证手机号是否符合要求即可： ```typescript static phone(control: AbstractControl): ValidationErrors | null { const phone = control.value as string; // 如果手机号是11位，并且以1打头，则验证成功 if (phone.length === 11 && phone.startsWith('1')) { return null; } return {phone: '手机号格式错误'}; } ``` 如此以来，当输入11位以1打头的手机号时，验证成功；  否则验证失败：  ## 单元测试 我们刚刚制定了一个规则相关粗暴的验证规则，相信在生产项目中你如上验证手机号是否合规则一定离被喷不远了。简单粗暴的方案使得测试也比较简单，这时候完成可用使用**手动**的方法。但如果测试的条件更多的话**手动**的方法便不切合实际了。 试想一下我们每完成一些验证手机号的代码，就需要从130-189号段一个个验证一遍，那将是什么样的痛苦。这时候就显出单元测试的优势了。 对于当前的验证，在掌握了自定义验证器的基本方法后，完全可以如下定制单元测试： ```typescript describe('YzValidators', () => { fit('should create an instance', () => { expect(new YzValidators()).toBeTruthy(); // 空手机号，返回非null const formControl = new FormControl(''); expect(YzValidators.phone(formControl)).toBeTruthy(); // 正常的手机号，返回null formControl.setValue('13900000000'); expect(YzValidators.phone(formControl)).toBeNull(); // 以2打头，返回非null formControl.setValue('23900000000'); expect(YzValidators.phone(formControl)).toBeTruthy(); // 不足11位，返回非null formControl.setValue('1390000000'); expect(YzValidators.phone(formControl)).toBeTruthy(); }); }); ``` 或者，直接将验证器引入`FormControl`: ```typescript +++ b/first-app/src/app/yz-validators.spec.ts @@ -2,7 +2,7 @@ import { YzValidators } from './yz-validators'; import {FormControl} from '@angular/forms'; describe('YzValidators', () => { - fit('should create an instance', () => { + it('should create an instance', () => { expect(new YzValidators()).toBeTruthy(); // 空手机号，返回非null const formControl = new FormControl(''); @@ -20,4 +20,22 @@ describe('YzValidators', () => { formControl.setValue('1390000000'); expect(YzValidators.phone(formControl)).toBeTruthy(); }); + + fit('将验证器加入到FromControl', () => { + // 空手机号，校验失败 + const formControl = new FormControl('', YzValidators.phone); + expect(formControl.invalid).toBeTrue(); + + // 正常的手机号，校验成功 + formControl.setValue('13900000000'); + expect(formControl.invalid).toBeFalse(); + + // 以2打头，校验失败 + formControl.setValue('23900000000'); + expect(formControl.invalid).toBeTrue(); + + // 不足11位，校验失败 + formControl.setValue('1390000000'); + expect(formControl.invalid).toBeTrue(); + }); }); ``` 此外，我们还可以使用`valid`字段来替换`invalid`字段，这样以来成功的时候断言为`true`，失败时断言为`false`更易懂一些： ```typescript +++ b/first-app/src/app/yz-validators.spec.ts @@ -25,17 +25,21 @@ describe('YzValidators', () => { // 空手机号，校验失败 const formControl = new FormControl('', YzValidators.phone); expect(formControl.invalid).toBeTrue(); + expect(formControl.valid).toBeFalse(); // 正常的手机号，校验成功 formControl.setValue('13900000000'); expect(formControl.invalid).toBeFalse(); + expect(formControl.valid).toBeTrue(); // 以2打头，校验失败 formControl.setValue('23900000000'); expect(formControl.invalid).toBeTrue(); + expect(formControl.valid).toBeFalse(); // 不足11位，校验失败 formControl.setValue('1390000000'); expect(formControl.invalid).toBeTrue(); + expect(formControl.valid).toBeFalse(); }); }); ``` 如此以来，当我们开发更加适用的手机验证器时，便可以维护一个更加符合现实的单元测试列表。然后在开发过程中，自动执行该测试文件，当所有的测试都通过时，就说明自己的功能成功了。相比于**手动**测试，这种单元测试的方法即安全、又高效。 ## 总结 自定义验证器很简单，只需要将方法声明为`static`，并将方法的返回值类型声明为` ValidationErrors | null`即可。 - 如果验证内容通过，则返回`null`。 - 如果验证内容没有通过，则返回` ValidationErrors` - `FormControl`每变更一次，该验证方法执行一次，所以在该方法中的代码一定要是高效的。 ` ValidationErrors`类型实际上是以`字符串`类型为键值的对象，比如：`{hello: 123}`、`{a: 123}`等都是其合法的值。 ```typescript export declare type ValidationErrors = { [key: string]: any; }; ``` 返回的错误信息最终将汇总到`FormControl`的`errors`字段中： ```html +++ b/first-app/src/app/student/add/add.component.html @@ -22,6 +22,7 @@ <div class="col-sm-10"> <input type="text" class="form-control" formControlName="phone"> {{formGroup.get('phone').invalid}} + {{formGroup.get('phone').errors | json}} <small class="text-danger" *ngIf="formGroup.get('phone').invalid"> 手机号格式不正确 </small> ```  ## 本节作业 尝试完成用于验证邮箱是否合法的邮箱验证器，比如: ```typescript static email(control: AbstractControl): ValidationErrors | null { // 这里是逻辑实现 } ``` 然后将此验证器应用到邮箱字段上，并进行充分的测试。 | 名称 | 链接 | | ---------------- | ------------------------------------------------------------ | | 定义自定义验证器 | [https://angular.cn/guide/form-validation#defining-custom-validators](https://angular.cn/guide/form-validation#defining-custom-validators) | | ValidatorFn | [https://angular.cn/api/forms/ValidatorFn#validatorfn](https://angular.cn/api/forms/ValidatorFn#validatorfn) | | ValidationErrors | [https://angular.cn/api/forms/ValidationErrors](https://angular.cn/api/forms/ValidationErrors) | | 本节源码 | [https://github.com/mengyunzhi/angular11-guild/archive/step7.2.2.zip](https://github.com/mengyunzhi/angular11-guild/archive/step7.2.2.zip) |