Validators

Provides a set of built-in validators that can be used by form controls.

A validator is a function that processes a FormControl or collection of controls and returns an error map or null. A null map means that validation has passed.

Links & Tutorials

Interface

min#

static min(min: number): ValidatorFn

Validator that requires the control's value to be greater than or equal to the provided number. The validator exists only as a function and not as a directive.

Validate against a minimum of 3

const control = new FormControl(2, Validators.min(3));

console.log(control.errors); // {min: {min: 3, actual: 2}}

Returns A validator function that returns an error map with the min property if the validation check fails, otherwise null.

max#

static max(max: number): ValidatorFn

Validator that requires the control's value to be less than or equal to the provided number. The validator exists only as a function and not as a directive.

Validate against a maximum of 15

const control = new FormControl(16, Validators.max(15));

console.log(control.errors); // {max: {max: 15, actual: 16}}

Returns A validator function that returns an error map with the max property if the validation check fails, otherwise null.

required#

static required(control: AbstractControl): ValidationErrors|null

Validator that requires the control have a non-empty value.

Validate that the field is non-empty

const control = new FormControl('', Validators.required);

console.log(control.errors); // {required: true}

Returns An error map with the required property if the validation check fails, otherwise null.

requiredTrue#

static requiredTrue(control: AbstractControl): ValidationErrors|null

Validator that requires the control's value be true. This validator is commonly used for required checkboxes.

Validate that the field value is true

const control = new FormControl('', Validators.requiredTrue);

console.log(control.errors); // {required: true}

Returns An error map that contains the required property set to true if the validation check fails, otherwise null.

email#

static email(control: AbstractControl): ValidationErrors|null

symbol) to begin or end with a period (.).

  • Disallow local-part to be longer than 64 characters.
  • Disallow the whole address to be longer than 254 characters.

If this pattern does not satisfy your business needs, you can use Validators.pattern() to validate the value against a different pattern., Validators.email);

console.log(control.errors); // {email: true}

Validator that requires the control's value pass an email validation test.

Tests the value using a [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
pattern suitable for common usecases. The pattern is based on the definition of a valid email
address in the [WHATWG HTML specification](https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address)
with some enhancements to incorporate more RFC rules (such as rules related to domain names and
the lengths of different parts of the address).

The differences from the WHATWG version include:
- Disallow `local-part` (the part before the `

### Validate that the field matches a valid email pattern

typescript const control = new FormControl('bad

Returns An error map with the email property if the validation check fails, otherwise null.

minLength#

static minLength(minLength: number): ValidatorFn

Validator that requires the length of the control's value to be greater than or equal to the provided minimum length. This validator is also provided by default if you use the the HTML5 minlength attribute.

Validate that the field has a minimum of 3 characters

const control = new FormControl('ng', Validators.minLength(3));

console.log(control.errors); // {minlength: {requiredLength: 3, actualLength: 2}}
<input minlength="5">

Returns A validator function that returns an error map with the minlength if the validation check fails, otherwise null.

maxLength#

static maxLength(maxLength: number): ValidatorFn

Validator that requires the length of the control's value to be less than or equal to the provided maximum length. This validator is also provided by default if you use the the HTML5 maxlength attribute.

Validate that the field has maximum of 5 characters

const control = new FormControl('Angular', Validators.maxLength(5));

console.log(control.errors); // {maxlength: {requiredLength: 5, actualLength: 7}}
<input maxlength="5">

Returns A validator function that returns an error map with the maxlength property if the validation check fails, otherwise null.

pattern#

static pattern(pattern: string|RegExp): ValidatorFn

Validator that requires the control's value to match a regex pattern. This validator is also provided by default if you use the HTML5 pattern attribute.

Validate that the field only contains letters or spaces

const control = new FormControl('1', Validators.pattern('[a-zA-Z ]*'));

console.log(control.errors); // {pattern: {requiredPattern: '^[a-zA-Z ]*$', actualValue: '1'}}
<input pattern="[a-zA-Z ]*">

Returns A validator function that returns an error map with the pattern property if the validation check fails, otherwise null.

nullValidator#

static nullValidator(control: AbstractControl): ValidationErrors|null

Validator that performs no operation.

compose#

static compose(validators: (ValidatorFn|null|undefined)[]|null): ValidatorFn|null

Compose multiple validators into a single function that returns the union of the individual error maps for the provided control.

Returns A validator function that returns an error map with the merged error maps of the validators if the validation check fails, otherwise null.

composeAsync#

static composeAsync(validators: (AsyncValidatorFn|null)[]): AsyncValidatorFn|null

Compose multiple async validators into a single function that returns the union of the individual error objects for the provided control.

Returns A validator function that returns an error map with the merged error objects of the async validators if the validation check fails, otherwise null.