@angular/forms

Validators

Class

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

  
    class 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.

min

ValidatorFn

Validator that requires the control's value to be greater than or equal to the provided number.

@paramminnumber

@returnsValidatorFn

Usage notes

Validate against a minimum of 3

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

max

ValidatorFn

Validator that requires the control's value to be less than or equal to the provided number.

@parammaxnumber

@returnsValidatorFn

Usage notes

Validate against a maximum of 15

          const control = new FormControl(16, Validators.max(15));console.log(control.errors); // {max: {max: 15, actual: 16}}

required

ValidationErrors | null

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

@paramcontrolAbstractControl<any, any>

@returnsValidationErrors | null

Usage notes

Validate that the field is non-empty

          const control = new FormControl('', Validators.required);console.log(control.errors); // {required: true}

requiredTrue

ValidationErrors | null

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

@paramcontrolAbstractControl<any, any>

@returnsValidationErrors | null

Usage notes

Validate that the field value is true

          const control = new FormControl('some value', Validators.requiredTrue);console.log(control.errors); // {required: true}

email

ValidationErrors | null

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

Tests the value using a regular expression pattern suitable for common use cases. The pattern is based on the definition of a valid email address in the WHATWG HTML specification 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 @ 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.

@paramcontrolAbstractControl<any, any>

@returnsValidationErrors | null

Usage notes

Validate that the field matches a valid email pattern

          const control = new FormControl('bad@', Validators.email);console.log(control.errors); // {email: true}

minLength

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. Note that the minLength validator is intended to be used only for types that have a numeric length property, such as strings or arrays. The minLength validator logic is also not invoked for values when their length property is 0 (for example in case of an empty string or an empty array), to support optional controls. You can use the standard required validator if empty values should not be considered valid.

@paramminLengthnumber

@returnsValidatorFn

Usage notes

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">

maxLength

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. Note that the maxLength validator is intended to be used only for types that have a numeric length property, such as strings or arrays.

@parammaxLengthnumber

@returnsValidatorFn

Usage notes

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">

pattern

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.

@parampatternstring | RegExp

A regular expression to be used as is to test the values, or a string. If a string is passed, the ^ character is prepended and the $ character is appended to the provided string (if not already present), and the resulting regular expression is used to test the values.

@returnsValidatorFn

Usage notes

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 ]*">

Pattern matching with the global or sticky flag

RegExp objects created with the g or y flags that are passed into Validators.pattern can produce different results on the same input when validations are run consecutively. This is due to how the behavior of RegExp.prototype.test is specified in ECMA-262 (RegExp preserves the index of the last match when the global or sticky flag is used). Due to this behavior, it is recommended that when using Validators.pattern you do not pass in a RegExp object with either the global or sticky flag enabled.

          // Not recommended (since the `g` flag is used)const controlOne = new FormControl('1', Validators.pattern(/foo/g));// Goodconst controlTwo = new FormControl('1', Validators.pattern(/foo/));

nullValidator

ValidationErrors | null

Validator that performs no operation.

@paramcontrolAbstractControl<any, any>

@returnsValidationErrors | null

compose

2 overloads

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

@paramvalidatorsnull

@returnsnull

@paramvalidators(ValidatorFn | null | undefined)[]

@returnsValidatorFn | null

composeAsync

AsyncValidatorFn | null

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

@paramvalidators(AsyncValidatorFn | null)[]

@returnsAsyncValidatorFn | null