Get validators and values from angular FormControl

Question

Is there a way for find out if an Angular FormControl has a validator and its value?

e.g. If I had a form control setup like this:

testControl: new FormControl(null, [Validators.required, Validators.minLength(5), Validators.maxLength(20)]),

Could I then check if the form control had the MaxLength validator, and more importantly, could I get out the maximum value.

I can do the following for the required validator:

const isRequired  = this.formCtrl.hasValidator(Validators.required);

But how do I get the MaxValidator and its value.

Thanks

Answer 1

When maxLength is invalid, you can get the requiredLength value as follows;

this.form.get('testControl')?.errors?.['maxlength']

Answer 2

To check if control has validator which is called with some parameters you must refer to exact the same validator both in control and in hasValidator():

const maxValidator = Validators.max(17);
const testControl = new FormControl('', [maxValidator]);
console.log(testControl.hasValidator(maxValidator)); // true

To not create validator for each control separatly you could create a wrapper for validators:

class ValidatorsWrapper {
  static maxValidators = new Map<number, ValidatorFn>();

  static max(max: number) {
    if(!this.maxValidators.has(max)) {
      this.maxValidators.set(max, Validators.max(max));
    }
    return this.maxValidators.get(max)!;
  }
}

const testControl = new FormControl('', [ValidatorsWrapper.max(15)]);
console.log(testControl.hasValidator(ValidatorsWrapper.max(15))); // true
console.log(testControl.hasValidator(ValidatorsWrapper.max(64))); // false

Hope this help.

Answer 3

There is no official public API for doing this. Moreover, since Validators are just functions you cannot get what was passed to e.g. Validator.min as this value is inside a closure.

But, there is a private property _rawValidators on the FromControl, that contains all the validators. Again, it is not very useful, because it is just an array of anonymous functions distinguishable only by reference and it is pretty much the same thing hasValidator offers.

There is a workaround. Since Validators are just functions and functions in JS may have properties, you can create a bunch of wrappers around Angular's validators that would have the information you need, for example:

export const MyValidators = {
  min: (value: number) => {
    const ngValidator = Validators.min(value) as MyValidator<number>;
    ngValidator.meta = {
      type: 'min',
      value,
    };
    return ngValidator;
  },
};

Then you can access them via _rawValidators and see this metadata.

Going further, you're right if you don't like the idea of using a private property. What is possible to do is extend FormControl with a public property that contains validators, unfortunately in the latest versions FC constructor is defined in a quite a fancy way so TS gets crazy and does not let to do it easily keeping all the type safety, but the main idea is something like this:

export function myFormControl<TValue = any>(
  formState: FormControlState<TValue> | TValue = null as unknown as TValue,
  validatorOrOpts?: ValidatorFn | ValidatorFn[] | FormControlOptions | null,
  asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null
): FormControl<TValue> & { myValidators: ValidatorFn[] | null } {
  const fc = new FormControl(formState, validatorOrOpts, asyncValidator);

  const validators = pickValidators(validatorOrOpts);

  const myFc = fc as FormControl<TValue> & {
    myValidators: ValidatorFn[] | null;
  };
  myFc.myValidators =
    validators === null
      ? null
      : Array.isArray(validators)
        ? validators
        : [validators];

  return myFc;
}

I created a repl with working example here

Answer 4

To achieve what you are asking for, you can do something like this:

getValidatorConfig(validator: any) {
    return validator ? validator(this.testControl)?.[validator.length === 1 ? 'requiredLength' : 'max'] : null;
  }

  ngOnInit() {
    const hasRequired = this.testControl.hasValidator(Validators.required);
    const hasMaxLength = this.testControl.hasValidator(Validators.maxLength);
    const maxLengthValue = this.getValidatorConfig(Validators.maxLength);

    console.log('Has Required Validator:', hasRequired);
    console.log('Has MaxLength Validator:', hasMaxLength);
    console.log('MaxLength Value:', maxLengthValue);
  }

Hope it helps!