在 Angular 7 中获取表单组上的验证器列表答案

【问题标题】：Get list of validators on formgroup in angular 7在 Angular 7 中获取表单组上的验证器列表
【发布时间】：2020-03-01 20:18:45
【问题描述】：

如何获取已在 angular7 中的 fromgroup 或 formcontrol 或 formarray 上应用的验证器列表？我找到了 setValidators(-) 但没有 getValidators(-)..

【问题讨论】：

看看这个话题：stackoverflow.com/questions/43838108/…问候

标签： angular

【解决方案1】：

您可以使用此方法进行检查验证

在 .ts 文件中

getAllErrors(form: FormGroup): { [key: string]: any; } | null {
    let hasError = false;
    const result = Object.keys(form.controls).reduce((acc, key) => {
      const control = form.get(key);
      const errors = (control instanceof FormGroup)
        ? this.getAllErrors(control)
        : control.errors;
      if (errors) {
        acc[key] = errors;
        hasError = true;
      }
      return acc;
    }, {} as { [key: string]: any; });
    return hasError ? result : null;
  }

在 .html 文件中

<form id="form" [formGroup]="form" (ngSubmit)="ProjectSubmit(formProjectGeneralData.value,1)"
    enctype="multipart/form-data">

 <input type="text" formControlName="id"  >

      <span class="warning" *ngIf="getAllErrors(form)">
        *required</span>
<input type="text" formControlName="name" >

      <span class="warning" *ngIf="getAllErrors(form)">
        *required</span>

</form>

stackBlitz Working demo

忽略我的样式

希望这会有所帮助..！

【讨论】：

【解决方案2】：

Validator 只是一个函数。 Angular 组合所有验证器。当需要验证 Angular 时，调用每个验证器函数。您可以访问组成它们的函数，但不能访问每个函数，因为它们是通过闭包封装的。

这是我从角度来源中发现的。

每当您创建 FormControl 或设置验证器时都会调用此函数。


function coerceToValidator(
    validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null): ValidatorFn|
    null {
  const validator =
      (isOptionsObj(validatorOrOpts) ? (validatorOrOpts as AbstractControlOptions).validators :
                                       validatorOrOpts) as ValidatorFn |
      ValidatorFn[] | null;

  return Array.isArray(validator) ? composeValidators(validator) : validator || null;
}

composeValidators 函数只是调用 Validators.compose

组合方法本身

  static compose(validators: (ValidatorFn|null|undefined)[]|null): ValidatorFn|null {
    if (!validators) return null;
    const presentValidators: ValidatorFn[] = validators.filter(isPresent) as any;
    if (presentValidators.length == 0) return null;

    return function(control: AbstractControl) {
      return _mergeErrors(_executeValidators(control, presentValidators));
    };
  }

和 _executeValidators

function _executeValidators(control: AbstractControl, validators: ValidatorFn[]): any[] {
  return validators.map(v => v(control));
}

如您所见，无法访问它们。

【讨论】：

【解决方案3】：

试试这个功能

invalidControls(form) {
    const invalid = [];
    const controls = form.controls;
    for (const name in controls) {
      if (controls[name].invalid) {
        invalid.push(name);
      }
    }
    return invalid;
}

【讨论】：

但它不会返回任何验证器列表。
它将返回所有应用了验证的表单控件