angular-cn/aio/dist/generated/docs/api/forms.json

{
  "id": "api/forms",
  "title": "@angular/forms",
  "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          ]\n        }\n      </script>\n        <a href=\"/api\">API</a>\n    </div>\n    <div class=\"github-links\">\n  <a href=\"https://github.com/angular/angular/edit/master/packages/forms/PACKAGE.md?message=docs(...)%3A%20describe%20your%20change...\" 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/PACKAGE.md\" 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=\"angularforms\">@angular/forms<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms#angularforms\"><i class=\"material-icons\">link</i></a></h1>\n  <label class=\"api-type-label package\">package</label>\n  \n  \n  \n</header>\n\n  <aio-toc class=\"embedded\"></aio-toc>\n\n  <div class=\"api-body\">\n    <p>Implements a set of directives and providers to communicate with native DOM elements when building forms\nto capture user input.</p>\n\n  <p>Use this API to register directives, build form and data models, and provide validation to your forms. Validators can\nbe synchronous or asynchronous depending on your use case. You can also extend the built-in functionality\nprovided by forms in Angular by using the interfaces and tokens to create custom validators and input elements.</p>\n<p>Angular forms allow you to:</p>\n<ul>\n<li>Capture the current value and validation status of a form.</li>\n<li>Track and listen for changes to the form's data model.</li>\n<li>Validate the correctness of user input.</li>\n<li>Create custom validators and input elements.</li>\n</ul>\n<p>You can build forms in one of two ways:</p>\n<ul>\n<li><em>Reactive forms</em> use existing instances of a <code><a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a></code> or <code><a href=\"api/forms/FormGroup\" class=\"code-anchor\">FormGroup</a></code> to build a form model. This form\nmodel is synced with form input elements through directives to track and communicate changes back to the form model. Changes\nto the value and status of the controls are provided as observables.</li>\n<li><em>Template-driven forms</em> rely on directives such as <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">NgModel</a></code> and <code><a href=\"api/forms/NgModelGroup\" class=\"code-anchor\">NgModelGroup</a></code> create the form model for you,\nso any changes to the form are communicated through the template.</li>\n</ul>\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#see-also\"><i class=\"material-icons\">link</i></a></h2>\n  <ul>\n  \n    <li><p>Find out more in the <a href=\"guide/forms-overview\">Forms Overview</a>.</p>\n</li>\n  </ul>\n</section>\n\n\n\n  \n  <h2 id=\"entry-points\">Entry points<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms#entry-points\"><i class=\"material-icons\">link</i></a></h2>\n  \n  \n  \n  <section class=\"export-list\">\n    <h3 id=\"primary\">Primary<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms#primary\"><i class=\"material-icons\">link</i></a></h3>\n    <table class=\"is-full-width list-table\">\n      \n      <tbody><tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms#primary-entry-point-exports\">@angular/forms</a></code></td>\n        <td>\n          \n          <p>Implements a set of directives and providers to communicate with native DOM elements when building forms\nto capture user input.</p>\n\n        </td>\n      </tr>\n      \n    </tbody></table>\n  </section>\n  \n\n  \n  \n  \n\n  \n\n  <h2 id=\"primary-entry-point-exports\">Primary entry point exports<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms#primary-entry-point-exports\"><i class=\"material-icons\">link</i></a></h2>\n  \n  \n  \n  \n  \n  <section class=\"export-list\">\n    <h3 id=\"ngmodules\">NgModules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms#ngmodules\"><i class=\"material-icons\">link</i></a></h3>\n    <table class=\"is-full-width list-table\">\n      \n      <tbody><tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/FormsModule\">FormsModule</a></code></td>\n        <td>\n          \n          <p>Exports the required providers and directives for template-driven forms,\nmaking them available for import by NgModules that import this module.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/ReactiveFormsModule\">ReactiveFormsModule</a></code></td>\n        <td>\n          \n          <p>Exports the required infrastructure and directives for reactive forms,\nmaking them available for import by NgModules that import this module.</p>\n\n        </td>\n      </tr>\n      \n    </tbody></table>\n  </section>\n  \n\n  \n  \n  \n  <section class=\"export-list\">\n    <h3 id=\"classes\">Classes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms#classes\"><i class=\"material-icons\">link</i></a></h3>\n    <table class=\"is-full-width list-table\">\n      \n      <tbody><tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/AbstractControl\">AbstractControl</a></code></td>\n        <td>\n          \n          <p>This is the base class for <code><a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a></code>, <code><a href=\"api/forms/FormGroup\" class=\"code-anchor\">FormGroup</a></code>, and <code><a href=\"api/forms/FormArray\" class=\"code-anchor\">FormArray</a></code>.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/AbstractControlDirective\">AbstractControlDirective</a></code></td>\n        <td>\n          \n          <p>Base class for control directives.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/ControlContainer\">ControlContainer</a></code></td>\n        <td>\n          \n          <p>A base class for directives that contain multiple registered instances of <code><a href=\"api/forms/NgControl\" class=\"code-anchor\">NgControl</a></code>.\nOnly used by the forms module.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/FormArray\">FormArray</a></code></td>\n        <td>\n          \n          <p>Tracks the value and validity state of an array of <code><a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a></code>,\n<code><a href=\"api/forms/FormGroup\" class=\"code-anchor\">FormGroup</a></code> or <code><a href=\"api/forms/FormArray\" class=\"code-anchor\">FormArray</a></code> instances.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/FormBuilder\">FormBuilder</a></code></td>\n        <td>\n          \n          <p>Creates an <code><a href=\"api/forms/AbstractControl\" class=\"code-anchor\">AbstractControl</a></code> from a user-specified configuration.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/FormControl\">FormControl</a></code></td>\n        <td>\n          \n          <p>Tracks the value and validation status of an individual form control.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/FormGroup\">FormGroup</a></code></td>\n        <td>\n          \n          <p>Tracks the value and validity state of a group of <code><a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a></code> instances.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/NgControl\">NgControl</a></code></td>\n        <td>\n          \n          <p>A base class that all <code><a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a></code>-based directives extend. It binds a <code><a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a></code>\nobject to a DOM element.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/Validators\">Validators</a></code></td>\n        <td>\n          \n          <p>Provides a set of built-in validators that can be used by form controls.</p>\n\n        </td>\n      </tr>\n      \n    </tbody></table>\n  </section>\n  \n\n  \n  \n  \n\n  \n  \n  \n\n  \n  \n  \n  <section class=\"export-list\">\n    <h3 id=\"structures\">Structures<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms#structures\"><i class=\"material-icons\">link</i></a></h3>\n    <table class=\"is-full-width list-table\">\n      \n      <tbody><tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/AbstractControlOptions\">AbstractControlOptions</a></code></td>\n        <td>\n          \n          <p>Interface for options provided to an <code><a href=\"api/forms/AbstractControl\" class=\"code-anchor\">AbstractControl</a></code>.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/AsyncValidator\">AsyncValidator</a></code></td>\n        <td>\n          \n          <p>An interface implemented by classes that perform asynchronous validation.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/AsyncValidatorFn\">AsyncValidatorFn</a></code></td>\n        <td>\n          \n          <p>A function that receives a control and returns a Promise or observable\nthat emits validation errors if present, otherwise null.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/ControlValueAccessor\">ControlValueAccessor</a></code></td>\n        <td>\n          \n          <p>Defines an interface that acts as a bridge between the Angular forms API and a\nnative element in the DOM.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/Form\">Form</a></code></td>\n        <td>\n          \n          <p>An interface implemented by <code><a href=\"api/forms/FormGroupDirective\" class=\"code-anchor\">FormGroupDirective</a></code> and <code><a href=\"api/forms/NgForm\" class=\"code-anchor\">NgForm</a></code> directives.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/Validator\">Validator</a></code></td>\n        <td>\n          \n          <p>An interface implemented by classes that perform synchronous validation.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/ValidatorFn\">ValidatorFn</a></code></td>\n        <td>\n          \n          <p>A function that receives a control and synchronously returns a map of\nvalidation errors if present, otherwise null.</p>\n\n        </td>\n      </tr>\n      \n    </tbody></table>\n  </section>\n  \n\n  \n  \n  \n  <section class=\"export-list\">\n    <h3 id=\"directives\">Directives<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms#directives\"><i class=\"material-icons\">link</i></a></h3>\n    <table class=\"is-full-width list-table\">\n      \n      <tbody><tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/AbstractFormGroupDirective\">AbstractFormGroupDirective</a></code></td>\n        <td>\n          \n          <p>A base class for code shared between the <code><a href=\"api/forms/NgModelGroup\" class=\"code-anchor\">NgModelGroup</a></code> and <code><a href=\"api/forms/FormGroupName\" class=\"code-anchor\">FormGroupName</a></code> directives.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/CheckboxControlValueAccessor\">CheckboxControlValueAccessor</a></code></td>\n        <td>\n          \n          <p>A <code><a href=\"api/forms/ControlValueAccessor\" class=\"code-anchor\">ControlValueAccessor</a></code> for writing a value and listening to changes on a checkbox input\nelement.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/CheckboxRequiredValidator\">CheckboxRequiredValidator</a></code></td>\n        <td>\n          \n          <p>A Directive that adds the <code>required</code> validator to checkbox controls marked with the\n<code>required</code> attribute. The directive is provided with the <code><a href=\"api/forms/NG_VALIDATORS\" class=\"code-anchor\">NG_VALIDATORS</a></code> multi-provider list.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/DefaultValueAccessor\">DefaultValueAccessor</a></code></td>\n        <td>\n          \n          <p>The default <code><a href=\"api/forms/ControlValueAccessor\" class=\"code-anchor\">ControlValueAccessor</a></code> for writing a value and listening to changes on input\nelements. The accessor is used by the <code><a href=\"api/forms/FormControlDirective\" class=\"code-anchor\">FormControlDirective</a></code>, <code><a href=\"api/forms/FormControlName\" class=\"code-anchor\">FormControlName</a></code>, and\n<code><a href=\"api/forms/NgModel\" class=\"code-anchor\">NgModel</a></code> directives.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/EmailValidator\">EmailValidator</a></code></td>\n        <td>\n          \n          <p>A directive that adds the <code><a href=\"api/forms/EmailValidator\" class=\"code-anchor\">email</a></code> validator to controls marked with the\n<code><a href=\"api/forms/EmailValidator\" class=\"code-anchor\">email</a></code> attribute. The directive is provided with the <code><a href=\"api/forms/NG_VALIDATORS\" class=\"code-anchor\">NG_VALIDATORS</a></code> multi-provider list.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/FormArrayName\">FormArrayName</a></code></td>\n        <td>\n          \n          <p>Syncs a nested <code><a href=\"api/forms/FormArray\" class=\"code-anchor\">FormArray</a></code> to a DOM element.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/FormControlDirective\">FormControlDirective</a></code></td>\n        <td>\n          \n          <p>Synchronizes a standalone <code><a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a></code> instance to a form control element.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/FormControlName\">FormControlName</a></code></td>\n        <td>\n          \n          <p>Syncs a <code><a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a></code> in an existing <code><a href=\"api/forms/FormGroup\" class=\"code-anchor\">FormGroup</a></code> to a form control\nelement by name.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/FormGroupDirective\">FormGroupDirective</a></code></td>\n        <td>\n          \n          <p>Binds an existing <code><a href=\"api/forms/FormGroup\" class=\"code-anchor\">FormGroup</a></code> to a DOM element.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/FormGroupName\">FormGroupName</a></code></td>\n        <td>\n          \n          <p>Syncs a nested <code><a href=\"api/forms/FormGroup\" class=\"code-anchor\">FormGroup</a></code> to a DOM element.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/MaxLengthValidator\">MaxLengthValidator</a></code></td>\n        <td>\n          \n          <p>A directive that adds max length validation to controls marked with the\n<code><a href=\"api/forms/MaxLengthValidator\" class=\"code-anchor\">maxlength</a></code> attribute. The directive is provided with the <code><a href=\"api/forms/NG_VALIDATORS\" class=\"code-anchor\">NG_VALIDATORS</a></code> multi-provider list.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/MaxValidator\">MaxValidator</a></code></td>\n        <td>\n          \n          <p>A directive which installs the <a href=\"api/forms/MaxValidator\"><code>MaxValidator</code></a> for any <code><a href=\"api/forms/FormControlName\" class=\"code-anchor\">formControlName</a></code>,\n<code>formControl</code>, or control with <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code> that also has a <code><a href=\"api/forms/MaxValidator\" class=\"code-anchor\">max</a></code> attribute.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/MinLengthValidator\">MinLengthValidator</a></code></td>\n        <td>\n          \n          <p>A directive that adds minimum length validation to controls marked with the\n<code><a href=\"api/forms/MinLengthValidator\" class=\"code-anchor\">minlength</a></code> attribute. The directive is provided with the <code><a href=\"api/forms/NG_VALIDATORS\" class=\"code-anchor\">NG_VALIDATORS</a></code> multi-provider list.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/MinValidator\">MinValidator</a></code></td>\n        <td>\n          \n          <p>A directive which installs the <a href=\"api/forms/MinValidator\"><code>MinValidator</code></a> for any <code><a href=\"api/forms/FormControlName\" class=\"code-anchor\">formControlName</a></code>,\n<code>formControl</code>, or control with <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code> that also has a <code><a href=\"api/forms/MinValidator\" class=\"code-anchor\">min</a></code> attribute.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/NgControlStatus\">NgControlStatus</a></code></td>\n        <td>\n          \n          <p>Directive automatically applied to Angular form controls that sets CSS classes\nbased on control status.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/NgControlStatusGroup\">NgControlStatusGroup</a></code></td>\n        <td>\n          \n          <p>Directive automatically applied to Angular form groups that sets CSS classes\nbased on control status (valid/invalid/dirty/etc).</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/NgForm\">NgForm</a></code></td>\n        <td>\n          \n          <p>Creates a top-level <code><a href=\"api/forms/FormGroup\" class=\"code-anchor\">FormGroup</a></code> instance and binds it to a form\nto track aggregate form value and validation status.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/NgModel\">NgModel</a></code></td>\n        <td>\n          \n          <p>Creates a <code><a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a></code> instance from a domain model and binds it\nto a form control element.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/NgModelGroup\">NgModelGroup</a></code></td>\n        <td>\n          \n          <p>Creates and binds a <code><a href=\"api/forms/FormGroup\" class=\"code-anchor\">FormGroup</a></code> instance to a DOM element.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/NgSelectOption\">NgSelectOption</a></code></td>\n        <td>\n          \n          <p>Marks <code>&#x3C;option></code> as dynamic, so Angular can be notified when options change.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/NumberValueAccessor\">NumberValueAccessor</a></code></td>\n        <td>\n          \n          <p>The <code><a href=\"api/forms/ControlValueAccessor\" class=\"code-anchor\">ControlValueAccessor</a></code> for writing a number value and listening to number input changes.\nThe value accessor is used by the <code><a href=\"api/forms/FormControlDirective\" class=\"code-anchor\">FormControlDirective</a></code>, <code><a href=\"api/forms/FormControlName\" class=\"code-anchor\">FormControlName</a></code>, and <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">NgModel</a></code>\ndirectives.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/PatternValidator\">PatternValidator</a></code></td>\n        <td>\n          \n          <p>A directive that adds regex pattern validation to controls marked with the\n<code><a href=\"api/forms/PatternValidator\" class=\"code-anchor\">pattern</a></code> attribute. The regex must match the entire control value.\nThe directive is provided with the <code><a href=\"api/forms/NG_VALIDATORS\" class=\"code-anchor\">NG_VALIDATORS</a></code> multi-provider list.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/RadioControlValueAccessor\">RadioControlValueAccessor</a></code></td>\n        <td>\n          \n          <p>The <code><a href=\"api/forms/ControlValueAccessor\" class=\"code-anchor\">ControlValueAccessor</a></code> for writing radio control values and listening to radio control\nchanges. The value accessor is used by the <code><a href=\"api/forms/FormControlDirective\" class=\"code-anchor\">FormControlDirective</a></code>, <code><a href=\"api/forms/FormControlName\" class=\"code-anchor\">FormControlName</a></code>, and\n<code><a href=\"api/forms/NgModel\" class=\"code-anchor\">NgModel</a></code> directives.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/RangeValueAccessor\">RangeValueAccessor</a></code></td>\n        <td>\n          \n          <p>The <code><a href=\"api/forms/ControlValueAccessor\" class=\"code-anchor\">ControlValueAccessor</a></code> for writing a range value and listening to range input changes.\nThe value accessor is used by the <code><a href=\"api/forms/FormControlDirective\" class=\"code-anchor\">FormControlDirective</a></code>, <code><a href=\"api/forms/FormControlName\" class=\"code-anchor\">FormControlName</a></code>, and  <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">NgModel</a></code>\ndirectives.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/RequiredValidator\">RequiredValidator</a></code></td>\n        <td>\n          \n          <p>A directive that adds the <code>required</code> validator to any controls marked with the\n<code>required</code> attribute. The directive is provided with the <code><a href=\"api/forms/NG_VALIDATORS\" class=\"code-anchor\">NG_VALIDATORS</a></code> multi-provider list.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/SelectControlValueAccessor\">SelectControlValueAccessor</a></code></td>\n        <td>\n          \n          <p>The <code><a href=\"api/forms/ControlValueAccessor\" class=\"code-anchor\">ControlValueAccessor</a></code> for writing select control values and listening to select control\nchanges. The value accessor is used by the <code><a href=\"api/forms/FormControlDirective\" class=\"code-anchor\">FormControlDirective</a></code>, <code><a href=\"api/forms/FormControlName\" class=\"code-anchor\">FormControlName</a></code>, and\n<code><a href=\"api/forms/NgModel\" class=\"code-anchor\">NgModel</a></code> directives.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/SelectMultipleControlValueAccessor\">SelectMultipleControlValueAccessor</a></code></td>\n        <td>\n          \n          <p>The <code><a href=\"api/forms/ControlValueAccessor\" class=\"code-anchor\">ControlValueAccessor</a></code> for writing multi-select control values and listening to multi-select\ncontrol changes. The value accessor is used by the <code><a href=\"api/forms/FormControlDirective\" class=\"code-anchor\">FormControlDirective</a></code>, <code><a href=\"api/forms/FormControlName\" class=\"code-anchor\">FormControlName</a></code>, and\n<code><a href=\"api/forms/NgModel\" class=\"code-anchor\">NgModel</a></code> directives.</p>\n\n        </td>\n      </tr>\n      \n    </tbody></table>\n  </section>\n  \n\n  \n  \n  \n\n  \n  \n  \n  <section class=\"export-list\">\n    <h3 id=\"types\">Types<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms#types\"><i class=\"material-icons\">link</i></a></h3>\n    <table class=\"is-full-width list-table\">\n      \n      <tbody><tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/COMPOSITION_BUFFER_MODE\">COMPOSITION_BUFFER_MODE</a></code></td>\n        <td>\n          \n          <p>Provide this token to control if form directives buffer IME input until\nthe \"compositionend\" event occurs.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/NG_ASYNC_VALIDATORS\">NG_ASYNC_VALIDATORS</a></code></td>\n        <td>\n          \n          <p>An <code><a href=\"api/core/InjectionToken\" class=\"code-anchor\">InjectionToken</a></code> for registering additional asynchronous validators used with\n<code><a href=\"api/forms/AbstractControl\" class=\"code-anchor\">AbstractControl</a></code>s.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/NG_VALIDATORS\">NG_VALIDATORS</a></code></td>\n        <td>\n          \n          <p>An <code><a href=\"api/core/InjectionToken\" class=\"code-anchor\">InjectionToken</a></code> for registering additional synchronous validators used with\n<code><a href=\"api/forms/AbstractControl\" class=\"code-anchor\">AbstractControl</a></code>s.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/NG_VALUE_ACCESSOR\">NG_VALUE_ACCESSOR</a></code></td>\n        <td>\n          \n          <p>Used to provide a <code><a href=\"api/forms/ControlValueAccessor\" class=\"code-anchor\">ControlValueAccessor</a></code> for form controls.</p>\n\n        </td>\n      </tr>\n      \n      <tr>\n        <td><code class=\"code-anchor\"><a href=\"api/forms/ValidationErrors\">ValidationErrors</a></code></td>\n        <td>\n          \n          <p>Defines the map of errors returned from failed validation checks.</p>\n\n        </td>\n      </tr>\n      \n    </tbody></table>\n  </section>\n  \n\n  </div>\n</article>\n\n<!-- links to this doc:\n - api/forms/AbstractControl\n - api/forms/AbstractControlDirective\n - api/forms/AbstractControlOptions\n - api/forms/AbstractFormGroupDirective\n - api/forms/AsyncValidator\n - api/forms/AsyncValidatorFn\n - api/forms/COMPOSITION_BUFFER_MODE\n - api/forms/CheckboxControlValueAccessor\n - api/forms/CheckboxRequiredValidator\n - api/forms/ControlContainer\n - api/forms/ControlValueAccessor\n - api/forms/DefaultValueAccessor\n - api/forms/EmailValidator\n - api/forms/Form\n - api/forms/FormArray\n - api/forms/FormArrayName\n - api/forms/FormBuilder\n - api/forms/FormControl\n - api/forms/FormControlDirective\n - api/forms/FormControlName\n - api/forms/FormGroup\n - api/forms/FormGroupDirective\n - api/forms/FormGroupName\n - api/forms/FormsModule\n - api/forms/MaxLengthValidator\n - api/forms/MaxValidator\n - api/forms/MinLengthValidator\n - api/forms/MinValidator\n - api/forms/NG_ASYNC_VALIDATORS\n - api/forms/NG_VALIDATORS\n - api/forms/NG_VALUE_ACCESSOR\n - api/forms/NgControl\n - api/forms/NgControlStatus\n - api/forms/NgControlStatusGroup\n - api/forms/NgForm\n - api/forms/NgModel\n - api/forms/NgModelGroup\n - api/forms/NgSelectOption\n - api/forms/NumberValueAccessor\n - api/forms/PatternValidator\n - api/forms/RadioControlValueAccessor\n - api/forms/RangeValueAccessor\n - api/forms/ReactiveFormsModule\n - api/forms/RequiredValidator\n - api/forms/SelectControlValueAccessor\n - api/forms/SelectMultipleControlValueAccessor\n - api/forms/ValidationErrors\n - api/forms/Validator\n - api/forms/ValidatorFn\n - api/forms/Validators\n - guide/npm-packages\n - guide/reactive-forms\n-->\n<!-- links from this doc:\n - /api\n - api/core/InjectionToken\n - api/forms#angularforms\n - api/forms#classes\n - api/forms#directives\n - api/forms#entry-points\n - api/forms#ngmodules\n - api/forms#primary\n - api/forms#primary-entry-point-exports\n - api/forms#see-also\n - api/forms#structures\n - api/forms#types\n - api/forms/AbstractControl\n - api/forms/AbstractControlDirective\n - api/forms/AbstractControlOptions\n - api/forms/AbstractFormGroupDirective\n - api/forms/AsyncValidator\n - api/forms/AsyncValidatorFn\n - api/forms/COMPOSITION_BUFFER_MODE\n - api/forms/CheckboxControlValueAccessor\n - api/forms/CheckboxRequiredValidator\n - api/forms/ControlContainer\n - api/forms/ControlValueAccessor\n - api/forms/DefaultValueAccessor\n - api/forms/EmailValidator\n - api/forms/Form\n - api/forms/FormArray\n - api/forms/FormArrayName\n - api/forms/FormBuilder\n - api/forms/FormControl\n - api/forms/FormControlDirective\n - api/forms/FormControlName\n - api/forms/FormGroup\n - api/forms/FormGroupDirective\n - api/forms/FormGroupName\n - api/forms/FormsModule\n - api/forms/MaxLengthValidator\n - api/forms/MaxValidator\n - api/forms/MinLengthValidator\n - api/forms/MinValidator\n - api/forms/NG_ASYNC_VALIDATORS\n - api/forms/NG_VALIDATORS\n - api/forms/NG_VALUE_ACCESSOR\n - api/forms/NgControl\n - api/forms/NgControlStatus\n - api/forms/NgControlStatusGroup\n - api/forms/NgForm\n - api/forms/NgModel\n - api/forms/NgModelGroup\n - api/forms/NgSelectOption\n - api/forms/NumberValueAccessor\n - api/forms/PatternValidator\n - api/forms/RadioControlValueAccessor\n - api/forms/RangeValueAccessor\n - api/forms/ReactiveFormsModule\n - api/forms/RequiredValidator\n - api/forms/SelectControlValueAccessor\n - api/forms/SelectMultipleControlValueAccessor\n - api/forms/ValidationErrors\n - api/forms/Validator\n - api/forms/ValidatorFn\n - api/forms/Validators\n - guide/forms-overview\n - https://github.com/angular/angular/edit/master/packages/forms/PACKAGE.md?message=docs(...)%3A%20describe%20your%20change...\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/PACKAGE.md\n-->"
}