angular组验证器 angular

前言
我们在对表单进行验证时，有时需要对多个字段同时进行验证，对不同字段的值进行比较，并针对它们的组合判断是否验证通过，在这种情况下使用对单一字段进行验证的验证器难以实现，这个时候就需要用到组验证器，在官方文档也叫跨字段交叉验证器。
组验证器的使用
官方文档链接
组验证器使用示例
下面通过项目中的实例讲解组验证器的用法。
当前项目中需要对是否接种疫苗，接种地点，未接种原因三个字段进行验证，如果接种疫苗，需填写接种地点（必填），否则填写未接种原因（非必填）。
1.为FormGroup添加组验证器注意：要想在单个自定义验证器中计算这三个控件，你就必须在它们共同的祖先控件中执行验证： FormGroup
可以在新建FormGroup时直接添加验证器，在创建时把一个新的验证器传给它的第二个参数

formGroup = new FormGroup({ 'beVaccinated': new FormControl(), 'vaccinatedPlace': new FormControl(), 'notVaccinatedReason': new FormControl() },{validators: VaccinatedValidator});

当然，通常我们在写的时候不会在新建FormGroup的时候添加参数，
而是使用下面的方式添加验证器

formGroup.setValidators(VaccinatedValidator);

添加完验证器后我们开始完成验证器的功能，这样就可以对formGroup中的值进行验证了
2.自定义组验证器验证器代码如下

import {AbstractControl, ValidationErrors, ValidatorFn} from '@angular/forms'; /** * 跨字段交叉验证器 * 同时验证接种疫苗和地点原因三个字段 * 如果接种，地点必填，只有填写地点才能验证通过，返回null * 未接种，地点不必填，直接返回null * @param control 需要验证的 formGroup */ export const VaccinatedValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => { const beVaccinated = control.get('beVaccinated'); const vaccinatedPlace = control.get('vaccinatedPlace'); const notVaccinatedReason = control.get('notVaccinatedReason'); // 判断是否传值 if (beVaccinated === null || vaccinatedPlace === null || notVaccinatedReason === null) { return {vaccinated: true}; } return (beVaccinated.value as boolean && vaccinatedPlace.value as string) || !beVaccinated.value as boolean ? null : {vaccinated: true}; };

这个验证器实现了 ValidatorFn 接口。它接收一个 Angular 表单控件对象作为参数，control即为当前验证的FormGroup，通过control.get('')的方式获取formGroup中的相应的formControl，这样就可以根据需要自己对其中的值进行验证。
如果验证信息有效，返回null，否则返回ValidationErrors，也就是{vaccinated: true}，其中的名称'vaccinated'和'true'可以根据需要自己定义。
注意：为避免没有传入相应FormControl，需要对使用get方法获取到的FormControl进行判断，如果为空直接返回ValidationErrors
3.在v层显示错误信息如果有时需要根据验证器返回的错误信息向用户显示相应信息，可以通过以下方法