Angular 10 References/ Forms
References

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 ```typescript 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 ```typescript 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 ```typescript 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 ```typescript 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 ```typescript const control = new FormControl('ng', Validators.minLength(3)); console.log(control.errors); // {minlength: {requiredLength: 3, actualLength: 2}} ``` ```html ``` 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 ```typescript const control = new FormControl('Angular', Validators.maxLength(5)); console.log(control.errors); // {maxlength: {requiredLength: 5, actualLength: 7}} ``` ```html ``` 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 ```typescript const control = new FormControl('1', Validators.pattern('[a-zA-Z ]*')); console.log(control.errors); // {pattern: {requiredPattern: '^[a-zA-Z ]*$', actualValue: '1'}} ``` ```html ``` 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`.