angular组验证器 - SegmentFault 思否

我们在对表单进行验证时，有时需要对多个字段同时进行验证，对不同字段的值进行比较，并针对它们的组合判断是否验证通过，在这种情况下使用对单一字段进行验证的验证器难以实现，这个时候就需要用到组验证器，在官方文档也叫跨字段交叉验证器。

组验证器的使用

官方文档链接
组验证器使用示例

下面通过项目中的实例讲解组验证器的用法。
当前项目中需要对是否接种疫苗，接种地点，未接种原因三个字段进行验证，如果接种疫苗，需填写接种地点（必填），否则填写未接种原因（非必填）。

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层显示错误信息

如果有时需要根据验证器返回的错误信息向用户显示相应信息，可以通过以下方法

<div *ngIf="formGroup.errors?.vaccinated" class="cross-validation-error-message alert alert-danger">
  信息错误
</div>

这样当出现错误时可以给用户很好的提示

组验证器简单来说就是自定义一个验证器，并添加到FormGroup中，在验证器中对多个值同时进行验证，注意在定义验证器是对传值是否为空判断