How to check if a FormControl has a `min` validator

Unfortunately `hasValidator` does not work well with validators created dynamically like `Validator.min` but there is a solution that allows getting information about min value anyway.

February 3, 2023 angularangular-formsangular-16reactive-forms

You can view the source code for this project by following this link: GitHub

Problem with hasValidator

Let’s create a simple FormControl with min validator. To check if the control has some validator we can use the hasValidator method but it does not work correctly for Validators.min(3) because calling Validators.min(3) creates another reference and the implementation of hasValidator check validators by reference.

1
import { FormControl, Validators } from "@angular/forms";
2


3
const passwordControl = new FormControl(null, [Validators.min(3)]);
4
passwordControl.hasValidator(Validators.min(3)); // -> false
5


6
const minThreeValidator = Validators.min(3);
7
const confirmPassword = new FormControl(null, [minThreeValidator]);
8
confirmPassword.hasValidator(minThreeValidator); // -> true

Checking if a control has a min validator without hasValidator

To check if the control has a min validator we can use knowledge about numbers. We can get all control’s validators and check if we get the min error for -Infinity.

1
import { AbstractControl, FormControl, Validators } from "@angular/forms";
2


3
const minAgeControl = new FormControl(null, [Validators.required, Validators.min(18)]);
4
const hasMinValidator = hasControlMinValidator(minAgeControl);
5
console.log(hasMinValidator); //-> true
6


7
function hasControlMinValidator(control: AbstractControl): boolean {
8
  const validator = control.validator;
9


10
  if (validator === null) {
11
    return false;
12
  }
13


14
  const errors = validator(new FormControl(-Infinity)) ?? {};
15
  return "min" in errors;
16
}

Because nothing can be lesser than -Infinity we are sure that we cause an error if the validator contains min validator.

Getting min value from the validator

To get information about the min value from the validator first we need to cause an error. In the error details, we have information about the min value and actual value of a control.

1
import { AbstractControl, FormControl, Validators } from "@angular/forms";
2


3
const minAgeControl = new FormControl(null, [Validators.required, Validators.min(18)]);
4
const minValue = getMinValue(minAgeControl);
5
console.log(minValue); //-> 18
6


7
function getMinValue(control: AbstractControl, fallback: number): number;
8
function getMinValue(control: AbstractControl): number | undefined;
9
function getMinValue(control: AbstractControl, fallback?: number): number | undefined {
10
  const validator = control.validator;
11


12
  if (validator === null) {
13
    return fallback;
14
  }
15


16
  const errors = validator(new FormControl(-Infinity)) ?? {};
17
  return "min" in errors ? errors["min"]["min"] : fallback;
18
}

We have to write errors['min']['min'] because first min is the error key and the second min is the value passed as the argument of Validators.min function.

1
const control = new FormControl(2, Validators.min(3));
2
console.log(control.errors); // {min: {min: 3, actual: 2}}

Do you like the content?

Your support helps me continue my work. Please consider making a donation.

Buy Me A Coffee

Donations are accepted through PayPal or Stripe. You do not need a account to donate. All major credit cards are accepted.

Leave a comment