Get list of validators on formgroup in angular 7

Question

How to get list of validators which already applied on a fromgroup or formcontrol or formarray in angular7? I found setValidators(-) but there is no getValidators(-)..

Take a look to this topic : https://stackoverflow.com/questions/43838108/get-validators-present-in-formgroup-formcontrol/43904237 Regards — Kévin Lavidalie, Nov 05 '19 at 13:06

score 0 · Answer 1 · answered Nov 05 '19 at 12:48

0

Try this function

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

answered Nov 05 '19 at 12:48

Ammar Hussain

294
2
13

but it will not return any validators list. – Santhosh Nov 05 '19 at 12:49
It will return all formcontrols on which validation is applied – Ammar Hussain Nov 05 '19 at 12:52

score 0 · Answer 2 · answered Nov 05 '19 at 13:16

Validator is simply a function. Angular compose all validators. When it's time to validate Angular call each validator function. You can access the function which compose them but not to each as they are encapsulated via closure.

Here is what I've found from angular sources.

This function is called whenever you create FormControl or set validators.


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 function is simply calling Validators.compose

compose method itself

  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));
    };
  }

and _executeValidators

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

As you can see are no access to them.

score 0 · Answer 3 · answered Nov 05 '19 at 13:17

You can User This method for check validation

In .ts File

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;
  }

In .html file

<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

Ignore my Styling

Hope this will helps ..!

Get list of validators on formgroup in angular 7

3 Answers3