{ "id": "api/forms/Validators", "title": "Validators", "contents": "\n\n
\n
\n
\n \n API > @angular/forms\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

Validatorslink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

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

\n\n

See more...

\n
\n \n \n \n
\n\nclass Validators {\n static min(min: number): ValidatorFn\n static max(max: number): ValidatorFn\n static required(control: AbstractControl): ValidationErrors | null\n static requiredTrue(control: AbstractControl): ValidationErrors | null\n static email(control: AbstractControl): ValidationErrors | null\n static minLength(minLength: number): ValidatorFn\n static maxLength(maxLength: number): ValidatorFn\n static pattern(pattern: string | RegExp): ValidatorFn\n static nullValidator(control: AbstractControl): ValidationErrors | null\n static compose(validators: ValidatorFn[]): ValidatorFn | null\n static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn | null\n}\n\n\n \n \n\n
\n\n\n \n
\n

See alsolink

\n \n
\n\n\n \n \n
\n

Descriptionlink

\n

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

\n\n \n
\n\n \n\n\n\n\n
\n

Static methodslink

\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n \n \n
\n
\n

\n min()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

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

\n\n

See also:

\n
    \n \n

  • updateValueAndValidity()

    \n
    • \n
\n \n
\n
\n \n\n static min(min: number): ValidatorFn\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n min\n number\n \n \n
\n\n \n
Returns
\n

ValidatorFn: A validator function that returns an error map with the\nmin property if the validation check fails, otherwise null.

\n\n \n\n\n \n\n \n
\n
\n

Usage Noteslink

\n
Validate against a minimum of 3link
\n\nconst control = new FormControl(2, Validators.min(3));\n\nconsole.log(control.errors); // {min: {min: 3, actual: 2}}\n\n\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n \n \n
\n
\n

\n max()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

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

\n\n

See also:

\n
    \n \n

  • updateValueAndValidity()

    \n
    • \n
\n \n
\n
\n \n\n static max(max: number): ValidatorFn\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n max\n number\n \n \n
\n\n \n
Returns
\n

ValidatorFn: A validator function that returns an error map with the\nmax property if the validation check fails, otherwise null.

\n\n \n\n\n \n\n \n
\n
\n

Usage Noteslink

\n
Validate against a maximum of 15link
\n\nconst control = new FormControl(16, Validators.max(15));\n\nconsole.log(control.errors); // {max: {max: 15, actual: 16}}\n\n\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n \n \n
\n
\n

\n required()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

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

\n\n

See also:

\n
    \n \n

  • updateValueAndValidity()

    \n
    • \n
\n \n
\n
\n \n\n static required(control: AbstractControl): ValidationErrors | null\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n control\n AbstractControl\n \n \n
\n\n \n
Returns
\n

ValidationErrors | null: An error map with the required property\nif the validation check fails, otherwise null.

\n\n \n\n\n \n\n \n
\n
\n

Usage Noteslink

\n
Validate that the field is non-emptylink
\n\nconst control = new FormControl('', Validators.required);\n\nconsole.log(control.errors); // {required: true}\n\n\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n \n \n
\n
\n

\n requiredTrue()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

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

\n\n

See also:

\n
    \n \n

  • updateValueAndValidity()

    \n
    • \n
\n \n
\n
\n \n\n static requiredTrue(control: AbstractControl): ValidationErrors | null\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n control\n AbstractControl\n \n \n
\n\n \n
Returns
\n

ValidationErrors | null: An error map that contains the required property\nset to true if the validation check fails, otherwise null.

\n\n \n\n\n \n\n \n
\n
\n

Usage Noteslink

\n
Validate that the field value is truelink
\n\nconst control = new FormControl('', Validators.requiredTrue);\n\nconsole.log(control.errors); // {required: true}\n\n\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n \n \n
\n
\n

\n email()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

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

\n\n

See also:

\n
    \n \n

  • updateValueAndValidity()

    \n
    • \n
\n \n
\n
\n \n\n static email(control: AbstractControl): ValidationErrors | null\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n control\n AbstractControl\n \n \n
\n\n \n
Returns
\n

ValidationErrors | null: An error map with the email property\nif the validation check fails, otherwise null.

\n\n \n\n\n \n\n \n
\n
\n

Tests the value using a regular\nexpression\npattern suitable for common usecases. The pattern is based on the definition of a valid email\naddress in the WHATWG HTML\nspecification with\nsome enhancements to incorporate more RFC rules (such as rules related to domain names and the\nlengths of different parts of the address).

\n

The differences from the WHATWG version include:

\n
    \n
  • Disallow local-part (the part before the @ symbol) to begin or end with a period (.).
    • \n
  • Disallow local-part to be longer than 64 characters.
    • \n
  • Disallow the whole address to be longer than 254 characters.
    • \n
\n

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

\n\n
\n

Usage Noteslink

\n
Validate that the field matches a valid email patternlink
\n\nconst control = new FormControl('bad@', Validators.email);\n\nconsole.log(control.errors); // {email: true}\n\n\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n \n \n
\n
\n

\n minLength()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Validator that requires the length of the control's value to be greater than or equal\nto the provided minimum length. This validator is also provided by default if you use the\nthe HTML5 minlength attribute. Note that the minLength validator is intended to be used\nonly for types that have a numeric length property, such as strings or arrays. The\nminLength validator logic is also not invoked for values when their length property is 0\n(for example in case of an empty string or an empty array), to support optional controls. You\ncan use the standard required validator if empty values should not be considered valid.

\n\n

See also:

\n
    \n \n

  • updateValueAndValidity()

    \n
    • \n
\n \n
\n
\n \n\n static minLength(minLength: number): ValidatorFn\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n minLength\n number\n \n \n
\n\n \n
Returns
\n

ValidatorFn: A validator function that returns an error map with the\nminlength property if the validation check fails, otherwise null.

\n\n \n\n\n \n\n \n
\n
\n

Usage Noteslink

\n
Validate that the field has a minimum of 3 characterslink
\n\nconst control = new FormControl('ng', Validators.minLength(3));\n\nconsole.log(control.errors); // {minlength: {requiredLength: 3, actualLength: 2}}\n\n\n<input minlength=\"5\">\n\n\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n \n \n
\n
\n

\n maxLength()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Validator that requires the length of the control's value to be less than or equal\nto the provided maximum length. This validator is also provided by default if you use the\nthe HTML5 maxlength attribute. Note that the maxLength validator is intended to be used\nonly for types that have a numeric length property, such as strings or arrays.

\n\n

See also:

\n
    \n \n

  • updateValueAndValidity()

    \n
    • \n
\n \n
\n
\n \n\n static maxLength(maxLength: number): ValidatorFn\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n maxLength\n number\n \n \n
\n\n \n
Returns
\n

ValidatorFn: A validator function that returns an error map with the\nmaxlength property if the validation check fails, otherwise null.

\n\n \n\n\n \n\n \n
\n
\n

Usage Noteslink

\n
Validate that the field has maximum of 5 characterslink
\n\nconst control = new FormControl('Angular', Validators.maxLength(5));\n\nconsole.log(control.errors); // {maxlength: {requiredLength: 5, actualLength: 7}}\n\n\n<input maxlength=\"5\">\n\n\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n \n \n
\n
\n

\n pattern()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

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

\n\n

See also:

\n
    \n \n

  • updateValueAndValidity()

    \n
    • \n
\n \n
\n
\n \n\n static pattern(pattern: string | RegExp): ValidatorFn\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n pattern\n string | RegExp\n

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

\n\n
\n\n \n
Returns
\n

ValidatorFn: A validator function that returns an error map with the\npattern property if the validation check fails, otherwise null.

\n\n \n\n\n \n\n \n
\n
\n

Usage Noteslink

\n
Validate that the field only contains letters or spaceslink
\n\nconst control = new FormControl('1', Validators.pattern('[a-zA-Z ]*'));\n\nconsole.log(control.errors); // {pattern: {requiredPattern: '^[a-zA-Z ]*$', actualValue: '1'}}\n\n\n<input pattern=\"[a-zA-Z ]*\">\n\n
Pattern matching with the global or sticky flaglink
\n

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

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

\n nullValidator()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Validator that performs no operation.

\n\n

See also:

\n
    \n \n

  • updateValueAndValidity()

    \n
    • \n
\n \n
\n
\n \n\n static nullValidator(control: AbstractControl): ValidationErrors | null\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n control\n AbstractControl\n \n \n
\n\n \n
Returns
\n

ValidationErrors | null

\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n compose()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n
\n

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

\n\n
\n\n static compose(validators: null): null\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n validators\n null\n \n \n
\n\n \n
Returns
\n

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

\n\n \n\n\n \n\n \n
\n
\n
\n \n\n static compose(validators: ValidatorFn[]): ValidatorFn | null\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n validators\n ValidatorFn[]\n \n \n
\n\n \n
Returns
\n

ValidatorFn | null

\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n composeAsync()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

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

\n\n

See also:

\n
    \n \n

  • updateValueAndValidity()

    \n
    • \n
\n \n
\n
\n \n\n static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn | null\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n validators\n AsyncValidatorFn[]\n \n \n
\n\n \n
Returns
\n

AsyncValidatorFn | null: A validator function that returns an error map with the\nmerged error objects of the async validators if the validation check fails, otherwise null.

\n\n \n\n\n \n\n \n
\n
\n\n \n
\n\n\n\n\n\n\n\n\n\n\n\n \n\n\n
\n
\n\n\n" }