5 lines
266 KiB
JSON
5 lines
266 KiB
JSON
{
|
|
"id": "api/forms/Validators",
|
|
"title": "Validators",
|
|
"contents": "\n\n<article>\n <div class=\"breadcrumb-container\">\n <div class=\"breadcrumb\">\n <script type=\"application/ld+json\">\n {\n \"@context\": \"http://schema.org\",\n \"@type\": \"BreadcrumbList\",\n \"itemListElement\": [\n { \"@type\": \"ListItem\", \"position\": 1, \"item\": { \"@id\": \"https://angular.io//api\", \"name\": \"API\" } },\n { \"@type\": \"ListItem\", \"position\": 2, \"item\": { \"@id\": \"https://angular.io/api/forms\", \"name\": \"@angular/forms\" } },\n { \"@type\": \"ListItem\", \"position\": 3, \"item\": { \"@id\": \"https://angular.io/api/forms/Validators\", \"name\": \"Validators\" } }\n ]\n }\n </script>\n <a href=\"/api\">API</a> > <a href=\"api/forms\">@angular/forms</a>\n </div>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L100-L410\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L100-L410\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n \n <header class=\"api-header\">\n <h1 id=\"validators\">Validators<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#validators\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label class\">class</label>\n \n \n \n </header>\n \n <aio-toc class=\"embedded\"></aio-toc>\n\n <div class=\"api-body\">\n \n <section class=\"short-description\">\n <p>Provides a set of built-in validators that can be used by form controls.</p>\n\n <p><a href=\"api/forms/Validators#description\">See more...</a></p>\n </section>\n \n \n \n <section class=\"class-overview\">\n<code-example language=\"ts\" hidecopy=\"true\">\nclass <a href=\"api/forms/Validators\" class=\"code-anchor\">Validators</a> {\n <a class=\"code-anchor\" href=\"api/forms/Validators#min\">static <span class=\"member-name\">min</span>(min: number): ValidatorFn</a>\n <a class=\"code-anchor\" href=\"api/forms/Validators#max\">static <span class=\"member-name\">max</span>(max: number): ValidatorFn</a>\n <a class=\"code-anchor\" href=\"api/forms/Validators#required\">static <span class=\"member-name\">required</span>(control: AbstractControl): ValidationErrors | null</a>\n <a class=\"code-anchor\" href=\"api/forms/Validators#requiredTrue\">static <span class=\"member-name\">requiredTrue</span>(control: AbstractControl): ValidationErrors | null</a>\n <a class=\"code-anchor\" href=\"api/forms/Validators#email\">static <span class=\"member-name\">email</span>(control: AbstractControl): ValidationErrors | null</a>\n <a class=\"code-anchor\" href=\"api/forms/Validators#minLength\">static <span class=\"member-name\">minLength</span>(minLength: number): ValidatorFn</a>\n <a class=\"code-anchor\" href=\"api/forms/Validators#maxLength\">static <span class=\"member-name\">maxLength</span>(maxLength: number): ValidatorFn</a>\n <a class=\"code-anchor\" href=\"api/forms/Validators#pattern\">static <span class=\"member-name\">pattern</span>(pattern: string | RegExp): ValidatorFn</a>\n <a class=\"code-anchor\" href=\"api/forms/Validators#nullValidator\">static <span class=\"member-name\">nullValidator</span>(control: AbstractControl): ValidationErrors | null</a>\n <a class=\"code-anchor\" href=\"api/forms/Validators#compose\">static <span class=\"member-name\">compose</span>(validators: ValidatorFn[]): ValidatorFn | null</a>\n <a class=\"code-anchor\" href=\"api/forms/Validators#composeAsync\">static <span class=\"member-name\">composeAsync</span>(validators: AsyncValidatorFn[]): AsyncValidatorFn | null</a>\n}\n</code-example>\n\n \n \n\n</section>\n\n\n \n<section class=\"see-also\">\n <h2 id=\"see-also\">See also<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#see-also\"><i class=\"material-icons\">link</i></a></h2>\n <ul>\n \n <li><p><a href=\"/guide/form-validation\">Form Validation</a></p>\n</li>\n </ul>\n</section>\n\n\n \n \n<section class=\"description\">\n <h2 id=\"description\">Description<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#description\"><i class=\"material-icons\">link</i></a></h2>\n <p>A validator is a function that processes a <code><a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a></code> or collection of\ncontrols and returns an error map or null. A null map means that validation has passed.</p>\n\n \n</section>\n\n \n\n\n\n\n<section class=\"static-methods\">\n <h2 id=\"static-methods\">Static methods<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#static-methods\"><i class=\"material-icons\">link</i></a></h2>\n \n <a id=\"min\"></a>\n<table class=\"is-full-width method-table static-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"min\">\n min()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#min\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L113-L135\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L113-L135\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Validator that requires the control's value to be greater than or equal to the provided number.</p>\n\n <p>See also:</p>\n <ul>\n \n <li><p><code>updateValueAndValidity()</code></p>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> <span class=\"member-name\"><a href=\"api/forms/MinValidator\" class=\"code-anchor\">min</a></span>(min: number): ValidatorFn</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table static-method-overload-parameters\">\n <tbody>\n \n <tr class=\"static-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code><a href=\"api/forms/MinValidator\" class=\"code-anchor\">min</a></code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/common/DecimalPipe\" class=\"code-anchor\">number</a></code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns\">Returns</h6>\n <p><code><a href=\"api/forms/ValidatorFn\" class=\"code-anchor\">ValidatorFn</a></code>: A validator function that returns an error map with the\n<code><a href=\"api/forms/MinValidator\" class=\"code-anchor\">min</a></code> property if the validation check fails, otherwise <code>null</code>.</p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n <tr>\n <td class=\"usage-notes\">\n <h4 id=\"min-usage-notes\">Usage Notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#min-usage-notes\"><i class=\"material-icons\">link</i></a></h4>\n <h5 id=\"validate-against-a-minimum-of-3\">Validate against a minimum of 3<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#validate-against-a-minimum-of-3\"><i class=\"material-icons\">link</i></a></h5>\n<code-example language=\"typescript\">\nconst control = new <a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a>(2, Validators.min(3));\n\nconsole.log(control.errors); // {<a href=\"api/forms/MinValidator\" class=\"code-anchor\">min</a>: {<a href=\"api/forms/MinValidator\" class=\"code-anchor\">min</a>: 3, actual: 2}}\n</code-example>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <a id=\"max\"></a>\n<table class=\"is-full-width method-table static-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"max\">\n max()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#max\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L136-L159\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L136-L159\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Validator that requires the control's value to be less than or equal to the provided number.</p>\n\n <p>See also:</p>\n <ul>\n \n <li><p><code>updateValueAndValidity()</code></p>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> <span class=\"member-name\"><a href=\"api/forms/MaxValidator\" class=\"code-anchor\">max</a></span>(max: number): ValidatorFn</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-1\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table static-method-overload-parameters\">\n <tbody>\n \n <tr class=\"static-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code><a href=\"api/forms/MaxValidator\" class=\"code-anchor\">max</a></code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/common/DecimalPipe\" class=\"code-anchor\">number</a></code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns-1\">Returns</h6>\n <p><code><a href=\"api/forms/ValidatorFn\" class=\"code-anchor\">ValidatorFn</a></code>: A validator function that returns an error map with the\n<code><a href=\"api/forms/MaxValidator\" class=\"code-anchor\">max</a></code> property if the validation check fails, otherwise <code>null</code>.</p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n <tr>\n <td class=\"usage-notes\">\n <h4 id=\"max-usage-notes\">Usage Notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#max-usage-notes\"><i class=\"material-icons\">link</i></a></h4>\n <h5 id=\"validate-against-a-maximum-of-15\">Validate against a maximum of 15<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#validate-against-a-maximum-of-15\"><i class=\"material-icons\">link</i></a></h5>\n<code-example language=\"typescript\">\nconst control = new <a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a>(16, Validators.max(15));\n\nconsole.log(control.errors); // {<a href=\"api/forms/MaxValidator\" class=\"code-anchor\">max</a>: {<a href=\"api/forms/MaxValidator\" class=\"code-anchor\">max</a>: 15, actual: 16}}\n</code-example>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <a id=\"required\"></a>\n<table class=\"is-full-width method-table static-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"required\">\n required()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#required\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L160-L183\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L160-L183\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Validator that requires the control have a non-empty value.</p>\n\n <p>See also:</p>\n <ul>\n \n <li><p><code>updateValueAndValidity()</code></p>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> <span class=\"member-name\">required</span>(control: AbstractControl): ValidationErrors | null</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-2\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table static-method-overload-parameters\">\n <tbody>\n \n <tr class=\"static-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>control</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/forms/AbstractControl\" class=\"code-anchor\">AbstractControl</a></code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns-2\">Returns</h6>\n <p><code><a href=\"api/forms/ValidationErrors\" class=\"code-anchor\">ValidationErrors</a> | null</code>: An error map with the <code>required</code> property\nif the validation check fails, otherwise <code>null</code>.</p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n <tr>\n <td class=\"usage-notes\">\n <h4 id=\"required-usage-notes\">Usage Notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#required-usage-notes\"><i class=\"material-icons\">link</i></a></h4>\n <h5 id=\"validate-that-the-field-is-non-empty\">Validate that the field is non-empty<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#validate-that-the-field-is-non-empty\"><i class=\"material-icons\">link</i></a></h5>\n<code-example language=\"typescript\">\nconst control = new <a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a>('', Validators.required);\n\nconsole.log(control.errors); // {required: true}\n</code-example>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <a id=\"requiredTrue\"></a>\n<table class=\"is-full-width method-table static-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"requiredtrue\">\n requiredTrue()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#requiredtrue\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L184-L208\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L184-L208\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Validator that requires the control's value be true. This validator is commonly\nused for required checkboxes.</p>\n\n <p>See also:</p>\n <ul>\n \n <li><p><code>updateValueAndValidity()</code></p>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> <span class=\"member-name\">requiredTrue</span>(control: AbstractControl): ValidationErrors | null</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-3\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table static-method-overload-parameters\">\n <tbody>\n \n <tr class=\"static-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>control</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/forms/AbstractControl\" class=\"code-anchor\">AbstractControl</a></code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns-3\">Returns</h6>\n <p><code><a href=\"api/forms/ValidationErrors\" class=\"code-anchor\">ValidationErrors</a> | null</code>: An error map that contains the <code>required</code> property\nset to <code>true</code> if the validation check fails, otherwise <code>null</code>.</p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n <tr>\n <td class=\"usage-notes\">\n <h4 id=\"requiredTrue-usage-notes\">Usage Notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#requiredTrue-usage-notes\"><i class=\"material-icons\">link</i></a></h4>\n <h5 id=\"validate-that-the-field-value-is-true\">Validate that the field value is true<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#validate-that-the-field-value-is-true\"><i class=\"material-icons\">link</i></a></h5>\n<code-example language=\"typescript\">\nconst control = new <a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a>('', Validators.requiredTrue);\n\nconsole.log(control.errors); // {required: true}\n</code-example>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <a id=\"email\"></a>\n<table class=\"is-full-width method-table static-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"email\">\n email()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#email\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L209-L248\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L209-L248\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Validator that requires the control's value pass an email validation test.</p>\n\n <p>See also:</p>\n <ul>\n \n <li><p><code>updateValueAndValidity()</code></p>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> <span class=\"member-name\"><a href=\"api/forms/EmailValidator\" class=\"code-anchor\">email</a></span>(control: AbstractControl): ValidationErrors | null</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-4\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table static-method-overload-parameters\">\n <tbody>\n \n <tr class=\"static-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>control</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/forms/AbstractControl\" class=\"code-anchor\">AbstractControl</a></code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns-4\">Returns</h6>\n <p><code><a href=\"api/forms/ValidationErrors\" class=\"code-anchor\">ValidationErrors</a> | null</code>: An error map with the <code><a href=\"api/forms/EmailValidator\" class=\"code-anchor\">email</a></code> property\nif the validation check fails, otherwise <code>null</code>.</p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n <tr>\n <td class=\"description\">\n <p>Tests the value using a <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions\">regular\nexpression</a>\npattern suitable for common usecases. The pattern is based on the definition of a valid email\naddress in the <a href=\"https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address\">WHATWG HTML\nspecification</a> with\nsome enhancements to incorporate more RFC rules (such as rules related to domain names and the\nlengths of different parts of the address).</p>\n<p>The differences from the WHATWG version include:</p>\n<ul>\n<li>Disallow <code>local-part</code> (the part before the <code>@</code> symbol) to begin or end with a period (<code>.</code>).</li>\n<li>Disallow <code>local-part</code> to be longer than 64 characters.</li>\n<li>Disallow the whole address to be longer than 254 characters.</li>\n</ul>\n<p>If this pattern does not satisfy your business needs, you can use <code><a href=\"api/forms/Validators#pattern\" class=\"code-anchor\">Validators.pattern()</a></code> to\nvalidate the value against a different pattern.</p>\n\n </td>\n </tr>\n\n <tr>\n <td class=\"usage-notes\">\n <h4 id=\"email-usage-notes\">Usage Notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#email-usage-notes\"><i class=\"material-icons\">link</i></a></h4>\n <h5 id=\"validate-that-the-field-matches-a-valid-email-pattern\">Validate that the field matches a valid email pattern<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#validate-that-the-field-matches-a-valid-email-pattern\"><i class=\"material-icons\">link</i></a></h5>\n<code-example language=\"typescript\">\nconst control = new <a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a>('bad@', Validators.email);\n\nconsole.log(control.errors); // {<a href=\"api/forms/EmailValidator\" class=\"code-anchor\">email</a>: true}\n</code-example>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <a id=\"minLength\"></a>\n<table class=\"is-full-width method-table static-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"minlength\">\n minLength()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#minlength\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L249-L282\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L249-L282\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>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 <code><a href=\"api/forms/MinLengthValidator\" class=\"code-anchor\">minlength</a></code> attribute. Note that the <code>minLength</code> validator is intended to be used\nonly for types that have a numeric <code>length</code> property, such as strings or arrays. The\n<code>minLength</code> validator logic is also not invoked for values when their <code>length</code> 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 <code>required</code> validator if empty values should not be considered valid.</p>\n\n <p>See also:</p>\n <ul>\n \n <li><p><code>updateValueAndValidity()</code></p>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> <span class=\"member-name\">minLength</span>(minLength: number): ValidatorFn</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-5\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table static-method-overload-parameters\">\n <tbody>\n \n <tr class=\"static-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>minLength</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/common/DecimalPipe\" class=\"code-anchor\">number</a></code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns-5\">Returns</h6>\n <p><code><a href=\"api/forms/ValidatorFn\" class=\"code-anchor\">ValidatorFn</a></code>: A validator function that returns an error map with the\n<code><a href=\"api/forms/MinLengthValidator\" class=\"code-anchor\">minlength</a></code> property if the validation check fails, otherwise <code>null</code>.</p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n <tr>\n <td class=\"usage-notes\">\n <h4 id=\"minLength-usage-notes\">Usage Notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#minLength-usage-notes\"><i class=\"material-icons\">link</i></a></h4>\n <h5 id=\"validate-that-the-field-has-a-minimum-of-3-characters\">Validate that the field has a minimum of 3 characters<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#validate-that-the-field-has-a-minimum-of-3-characters\"><i class=\"material-icons\">link</i></a></h5>\n<code-example language=\"typescript\">\nconst control = new <a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a>('ng', Validators.minLength(3));\n\nconsole.log(control.errors); // {<a href=\"api/forms/MinLengthValidator\" class=\"code-anchor\">minlength</a>: {requiredLength: 3, actualLength: 2}}\n</code-example>\n<code-example language=\"html\">\n<input <a href=\"api/forms/MinLengthValidator\" class=\"code-anchor\">minlength</a>=\"5\">\n</code-example>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <a id=\"maxLength\"></a>\n<table class=\"is-full-width method-table static-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"maxlength\">\n maxLength()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#maxlength\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L283-L313\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L283-L313\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>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 <code><a href=\"api/forms/MaxLengthValidator\" class=\"code-anchor\">maxlength</a></code> attribute. Note that the <code>maxLength</code> validator is intended to be used\nonly for types that have a numeric <code>length</code> property, such as strings or arrays.</p>\n\n <p>See also:</p>\n <ul>\n \n <li><p><code>updateValueAndValidity()</code></p>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> <span class=\"member-name\">maxLength</span>(maxLength: number): ValidatorFn</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-6\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table static-method-overload-parameters\">\n <tbody>\n \n <tr class=\"static-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>maxLength</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/common/DecimalPipe\" class=\"code-anchor\">number</a></code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns-6\">Returns</h6>\n <p><code><a href=\"api/forms/ValidatorFn\" class=\"code-anchor\">ValidatorFn</a></code>: A validator function that returns an error map with the\n<code><a href=\"api/forms/MaxLengthValidator\" class=\"code-anchor\">maxlength</a></code> property if the validation check fails, otherwise <code>null</code>.</p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n <tr>\n <td class=\"usage-notes\">\n <h4 id=\"maxLength-usage-notes\">Usage Notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#maxLength-usage-notes\"><i class=\"material-icons\">link</i></a></h4>\n <h5 id=\"validate-that-the-field-has-maximum-of-5-characters\">Validate that the field has maximum of 5 characters<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#validate-that-the-field-has-maximum-of-5-characters\"><i class=\"material-icons\">link</i></a></h5>\n<code-example language=\"typescript\">\nconst control = new <a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a>('Angular', Validators.maxLength(5));\n\nconsole.log(control.errors); // {<a href=\"api/forms/MaxLengthValidator\" class=\"code-anchor\">maxlength</a>: {requiredLength: 5, actualLength: 7}}\n</code-example>\n<code-example language=\"html\">\n<input <a href=\"api/forms/MaxLengthValidator\" class=\"code-anchor\">maxlength</a>=\"5\">\n</code-example>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <a id=\"pattern\"></a>\n<table class=\"is-full-width method-table static-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"pattern\">\n pattern()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#pattern\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L314-L366\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L314-L366\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Validator that requires the control's value to match a regex pattern. This validator is also\nprovided by default if you use the HTML5 <code><a href=\"api/forms/PatternValidator\" class=\"code-anchor\">pattern</a></code> attribute.</p>\n\n <p>See also:</p>\n <ul>\n \n <li><p><code>updateValueAndValidity()</code></p>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> <span class=\"member-name\"><a href=\"api/forms/PatternValidator\" class=\"code-anchor\">pattern</a></span>(pattern: string | RegExp): ValidatorFn</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-7\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table static-method-overload-parameters\">\n <tbody>\n \n <tr class=\"static-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code><a href=\"api/forms/PatternValidator\" class=\"code-anchor\">pattern</a></code>\n </td>\n <td class=\"param-type\"><code>string | RegExp</code></td>\n <td class=\"param-description\">\n <p>A regular expression to be used as is to test the values, or a string.\nIf a string is passed, the <code>^</code> character is prepended and the <code>$</code> character is\nappended to the provided string (if not already present), and the resulting regular\nexpression is used to test the values.</p>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns-7\">Returns</h6>\n <p><code><a href=\"api/forms/ValidatorFn\" class=\"code-anchor\">ValidatorFn</a></code>: A validator function that returns an error map with the\n<code><a href=\"api/forms/PatternValidator\" class=\"code-anchor\">pattern</a></code> property if the validation check fails, otherwise <code>null</code>.</p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n <tr>\n <td class=\"usage-notes\">\n <h4 id=\"pattern-usage-notes\">Usage Notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#pattern-usage-notes\"><i class=\"material-icons\">link</i></a></h4>\n <h5 id=\"validate-that-the-field-only-contains-letters-or-spaces\">Validate that the field only contains letters or spaces<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#validate-that-the-field-only-contains-letters-or-spaces\"><i class=\"material-icons\">link</i></a></h5>\n<code-example language=\"typescript\">\nconst control = new <a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a>('1', Validators.pattern('[a-zA-Z ]*'));\n\nconsole.log(control.errors); // {<a href=\"api/forms/PatternValidator\" class=\"code-anchor\">pattern</a>: {requiredPattern: '^[a-zA-Z ]*$', actualValue: '1'}}\n</code-example>\n<code-example language=\"html\">\n<input <a href=\"api/forms/PatternValidator\" class=\"code-anchor\">pattern</a>=\"[a-zA-Z ]*\">\n</code-example>\n<h5 id=\"pattern-matching-with-the-global-or-sticky-flag\">Pattern matching with the global or sticky flag<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#pattern-matching-with-the-global-or-sticky-flag\"><i class=\"material-icons\">link</i></a></h5>\n<p><code>RegExp</code> objects created with the <code>g</code> or <code>y</code> flags that are passed into <code>Validators.pattern</code>\ncan produce different results on the same input when validations are run consecutively. This is\ndue to how the behavior of <code>RegExp.prototype.test</code> is\nspecified in <a href=\"https://tc39.es/ecma262/#sec-regexpbuiltinexec\">ECMA-262</a>\n(<code>RegExp</code> 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\n<code>Validators.pattern</code> you <strong>do not</strong> pass in a <code>RegExp</code> object with either the global or sticky\nflag enabled.</p>\n<code-example language=\"typescript\">\n// Not recommended (since the `g` flag is used)\nconst controlOne = new <a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a>('1', Validators.pattern(/foo/g));\n\n// Good\nconst controlTwo = new <a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a>('1', Validators.pattern(/foo/));\n</code-example>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <a id=\"nullValidator\"></a>\n<table class=\"is-full-width method-table static-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"nullvalidator\">\n nullValidator()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#nullvalidator\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L367-L377\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L367-L377\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Validator that performs no operation.</p>\n\n <p>See also:</p>\n <ul>\n \n <li><p><code>updateValueAndValidity()</code></p>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> <span class=\"member-name\">nullValidator</span>(control: AbstractControl): ValidationErrors | null</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-8\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table static-method-overload-parameters\">\n <tbody>\n \n <tr class=\"static-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>control</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/forms/AbstractControl\" class=\"code-anchor\">AbstractControl</a></code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns-8\">Returns</h6>\n <p><code><a href=\"api/forms/ValidationErrors\" class=\"code-anchor\">ValidationErrors</a> | null</code></p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n \n </tbody>\n</table>\n\n \n <a id=\"compose\"></a>\n<table class=\"is-full-width method-table static-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"compose\">\n compose()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#compose\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L392-L394\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L392-L394\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n \n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n <div class=\"short-description\">\n <p>Compose multiple validators into a single function that returns the union\nof the individual error maps for the provided control.</p>\n\n </div>\n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> <span class=\"member-name\">compose</span>(validators: null): null</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-9\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table static-method-overload-parameters\">\n <tbody>\n \n <tr class=\"static-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>validators</code>\n </td>\n <td class=\"param-type\"><code>null</code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns-9\">Returns</h6>\n <p><code>null</code>: A validator function that returns an error map with the\nmerged error maps of the validators if the validation check fails, otherwise <code>null</code>.</p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> <span class=\"member-name\">compose</span>(validators: ValidatorFn[]): ValidatorFn | null</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-10\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table static-method-overload-parameters\">\n <tbody>\n \n <tr class=\"static-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>validators</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/forms/ValidatorFn\" class=\"code-anchor\">ValidatorFn</a>[]</code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns-10\">Returns</h6>\n <p><code><a href=\"api/forms/ValidatorFn\" class=\"code-anchor\">ValidatorFn</a> | null</code></p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n \n </tbody>\n</table>\n\n \n <a id=\"composeAsync\"></a>\n<table class=\"is-full-width method-table static-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"composeasync\">\n composeAsync()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/Validators#composeasync\"><i class=\"material-icons\">link</i></a></h3>\n <div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L395-L409\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n <a href=\"https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L395-L409\" aria-label=\"View Source\" title=\"View Source\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">code</i></a>\n</div>\n </div>\n </th></tr></thead>\n <tbody>\n <tr>\n <td class=\"short-description\">\n <p>Compose multiple async validators into a single function that returns the union\nof the individual error objects for the provided control.</p>\n\n <p>See also:</p>\n <ul>\n \n <li><p><code>updateValueAndValidity()</code></p>\n</li>\n </ul>\n \n </td>\n </tr>\n \n <tr>\n <td>\n <div class=\"overload-info\">\n \n\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box api-heading\"><a href=\"api/upgrade/static\" class=\"code-anchor\">static</a> <span class=\"member-name\">composeAsync</span>(validators: AsyncValidatorFn[]): AsyncValidatorFn | null</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters-11\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table static-method-overload-parameters\">\n <tbody>\n \n <tr class=\"static-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>validators</code>\n </td>\n <td class=\"param-type\"><code><a href=\"api/forms/AsyncValidatorFn\" class=\"code-anchor\">AsyncValidatorFn</a>[]</code></td>\n <td class=\"param-description\">\n \n \n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns-11\">Returns</h6>\n <p><code><a href=\"api/forms/AsyncValidatorFn\" class=\"code-anchor\">AsyncValidatorFn</a> | null</code>: A validator function that returns an error map with the\nmerged error objects of the async validators if the validation check fails, otherwise <code>null</code>.</p>\n\n \n\n\n \n\n \n</div>\n </td>\n </tr>\n \n\n \n\n \n </tbody>\n</table>\n\n \n</section>\n\n\n\n\n\n\n\n\n\n\n\n \n\n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/forms\n - api/forms/FormBuilder\n - api/forms/FormControlDirective\n - api/forms/FormControlName\n - api/forms/FormGroupDirective\n - api/forms/FormGroupName\n - guide/dynamic-form\n - guide/form-validation\n - guide/reactive-forms\n-->\n<!-- links from this doc:\n - /api\n - /guide/form-validation\n - api/common/DecimalPipe\n - api/forms\n - api/forms/AbstractControl\n - api/forms/AsyncValidatorFn\n - api/forms/EmailValidator\n - api/forms/FormControl\n - api/forms/MaxLengthValidator\n - api/forms/MaxValidator\n - api/forms/MinLengthValidator\n - api/forms/MinValidator\n - api/forms/PatternValidator\n - api/forms/ValidationErrors\n - api/forms/ValidatorFn\n - api/forms/Validators#compose\n - api/forms/Validators#composeAsync\n - api/forms/Validators#composeasync\n - api/forms/Validators#description\n - api/forms/Validators#email\n - api/forms/Validators#email-usage-notes\n - api/forms/Validators#max\n - api/forms/Validators#max-usage-notes\n - api/forms/Validators#maxLength\n - api/forms/Validators#maxLength-usage-notes\n - api/forms/Validators#maxlength\n - api/forms/Validators#min\n - api/forms/Validators#min-usage-notes\n - api/forms/Validators#minLength\n - api/forms/Validators#minLength-usage-notes\n - api/forms/Validators#minlength\n - api/forms/Validators#nullValidator\n - api/forms/Validators#nullvalidator\n - api/forms/Validators#pattern\n - api/forms/Validators#pattern-matching-with-the-global-or-sticky-flag\n - api/forms/Validators#pattern-usage-notes\n - api/forms/Validators#required\n - api/forms/Validators#required-usage-notes\n - api/forms/Validators#requiredTrue\n - api/forms/Validators#requiredTrue-usage-notes\n - api/forms/Validators#requiredtrue\n - api/forms/Validators#see-also\n - api/forms/Validators#static-methods\n - api/forms/Validators#validate-against-a-maximum-of-15\n - api/forms/Validators#validate-against-a-minimum-of-3\n - api/forms/Validators#validate-that-the-field-has-a-minimum-of-3-characters\n - api/forms/Validators#validate-that-the-field-has-maximum-of-5-characters\n - api/forms/Validators#validate-that-the-field-is-non-empty\n - api/forms/Validators#validate-that-the-field-matches-a-valid-email-pattern\n - api/forms/Validators#validate-that-the-field-only-contains-letters-or-spaces\n - api/forms/Validators#validate-that-the-field-value-is-true\n - api/forms/Validators#validators\n - api/upgrade/static\n - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions\n - https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L100-L410\n - https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L113-L135\n - https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L136-L159\n - https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L160-L183\n - https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L184-L208\n - https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L209-L248\n - https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L249-L282\n - https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L283-L313\n - https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L314-L366\n - https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L367-L377\n - https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L392-L394\n - https://github.com/angular/angular/edit/master/packages/forms/src/validators.ts?message=docs(forms)%3A%20describe%20your%20change...#L395-L409\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L100-L410\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L113-L135\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L136-L159\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L160-L183\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L184-L208\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L209-L248\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L249-L282\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L283-L313\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L314-L366\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L367-L377\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L392-L394\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/validators.ts#L395-L409\n - https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address\n - https://tc39.es/ecma262/#sec-regexpbuiltinexec\n-->"
|
|
} |