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

如果有时须要依据验证器返回的错误信息向用户显示相应信息，能够通过以下办法

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

这样当呈现谬误时能够给用户很好的提醒

总结

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