5 lines
19 KiB
JSON
5 lines
19 KiB
JSON
{
|
|
"id": "api/forms/FormsModule",
|
|
"title": "FormsModule",
|
|
"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/FormsModule\", \"name\": \"FormsModule\" } }\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/form_providers.ts?message=docs(forms)%3A%20describe%20your%20change...#L12-L30\" 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/form_providers.ts#L12-L30\" 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=\"formsmodule\">FormsModule<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/FormsModule#formsmodule\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label ngmodule\">ngmodule</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>Exports the required providers and directives for template-driven forms,\nmaking them available for import by NgModules that import this module.</p>\n\n <p><a href=\"api/forms/FormsModule#description\">See more...</a></p>\n </section>\n \n \n \n <section class=\"ngmodule-overview\">\n<code-example language=\"ts\" hidecopy=\"true\">\nclass <a href=\"api/forms/FormsModule\" class=\"code-anchor\">FormsModule</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/FormsModule#see-also\"><i class=\"material-icons\">link</i></a></h2>\n <ul>\n \n <li><p><a href=\"/guide/forms-overview\">Forms Overview</a></p>\n</li>\n <li><p><a href=\"/guide/forms\">Template-driven Forms Guide</a></p>\n</li>\n </ul>\n</section>\n\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/FormsModule#description\"><i class=\"material-icons\">link</i></a></h2>\n <p>Providers associated with this module:</p>\n<ul>\n<li><code>RadioControlRegistry</code></li>\n</ul>\n\n \n</section>\n\n \n\n \n\n \n\n \n\n\n \n\n\n \n\n \n \n<section class=\"directives\">\n <h2 id=\"directives\">Directives<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/FormsModule#directives\"><i class=\"material-icons\">link</i></a></h2>\n <table class=\"is-full-width list-table directive-table\">\n <thead>\n <tr><th>Name</th><th>Description</th></tr>\n </thead>\n <tbody>\n \n <tr>\n <td>\n <a href=\"api/forms/CheckboxControlValueAccessor\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">CheckboxControlValueAccessor</code-example>\n </a>\n </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>\n <a href=\"api/forms/CheckboxRequiredValidator\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">CheckboxRequiredValidator</code-example>\n </a>\n </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>\n <a href=\"api/forms/DefaultValueAccessor\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">DefaultValueAccessor</code-example>\n </a>\n </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>\n <a href=\"api/forms/EmailValidator\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">EmailValidator</code-example>\n </a>\n </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>\n <a href=\"api/forms/MaxLengthValidator\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">MaxLengthValidator</code-example>\n </a>\n </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>\n <a href=\"api/forms/MaxValidator\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">MaxValidator</code-example>\n </a>\n </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>\n <a href=\"api/forms/MinLengthValidator\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">MinLengthValidator</code-example>\n </a>\n </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>\n <a href=\"api/forms/MinValidator\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">MinValidator</code-example>\n </a>\n </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>\n <a href=\"api/forms/NgControlStatus\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">NgControlStatus</code-example>\n </a>\n </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>\n <a href=\"api/forms/NgControlStatusGroup\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">NgControlStatusGroup</code-example>\n </a>\n </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>\n <a href=\"api/forms/NgForm\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">NgForm</code-example>\n </a>\n </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>\n <a href=\"api/forms/NgModel\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">NgModel</code-example>\n </a>\n </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>\n <a href=\"api/forms/NgModelGroup\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">NgModelGroup</code-example>\n </a>\n </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>\n <a href=\"api/forms/NgSelectOption\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">NgSelectOption</code-example>\n </a>\n </td>\n <td>\n \n <p>Marks <code><option></code> as dynamic, so Angular can be notified when options change.</p>\n\n </td>\n </tr>\n \n <tr>\n <td>\n <a href=\"api/forms/NumberValueAccessor\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">NumberValueAccessor</code-example>\n </a>\n </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>\n <a href=\"api/forms/PatternValidator\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">PatternValidator</code-example>\n </a>\n </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>\n <a href=\"api/forms/RadioControlValueAccessor\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">RadioControlValueAccessor</code-example>\n </a>\n </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>\n <a href=\"api/forms/RangeValueAccessor\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">RangeValueAccessor</code-example>\n </a>\n </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>\n <a href=\"api/forms/RequiredValidator\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">RequiredValidator</code-example>\n </a>\n </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>\n <a href=\"api/forms/SelectControlValueAccessor\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">SelectControlValueAccessor</code-example>\n </a>\n </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>\n <a href=\"api/forms/SelectMultipleControlValueAccessor\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">SelectMultipleControlValueAccessor</code-example>\n </a>\n </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>\n </table>\n</section>\n\n \n \n\n\n \n\n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/forms\n - api/forms/AbstractControlDirective\n - api/forms/CheckboxControlValueAccessor\n - api/forms/CheckboxRequiredValidator\n - api/forms/DefaultValueAccessor\n - api/forms/EmailValidator\n - api/forms/Form\n - api/forms/MaxLengthValidator\n - api/forms/MaxValidator\n - api/forms/MinLengthValidator\n - api/forms/MinValidator\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/RequiredValidator\n - api/forms/SelectControlValueAccessor\n - api/forms/SelectMultipleControlValueAccessor\n - errors/NG0301\n - errors/NG8003\n - guide/bootstrapping\n - guide/built-in-directives\n - guide/cheatsheet\n - guide/docs-style-guide\n - guide/entry-components\n - guide/feature-modules\n - guide/forms\n - guide/frequent-ngmodules\n - guide/hierarchical-dependency-injection\n - guide/ngmodule-api\n - guide/ngmodule-faq\n - guide/ngmodules\n - guide/router\n - guide/router-tutorial-toh\n - guide/sharing-ngmodules\n - guide/styleguide\n - guide/testing-components-scenarios\n - guide/upgrade\n - tutorial/toh-pt1\n - tutorial/toh-pt3\n - tutorial/toh-pt4\n - tutorial/toh-pt5\n - tutorial/toh-pt6\n-->\n<!-- links from this doc:\n - /api\n - /guide/forms\n - /guide/forms-overview\n - api/forms\n - api/forms/CheckboxControlValueAccessor\n - api/forms/CheckboxRequiredValidator\n - api/forms/ControlValueAccessor\n - api/forms/DefaultValueAccessor\n - api/forms/EmailValidator\n - api/forms/FormControl\n - api/forms/FormControlDirective\n - api/forms/FormControlName\n - api/forms/FormGroup\n - api/forms/FormsModule#description\n - api/forms/FormsModule#directives\n - api/forms/FormsModule#formsmodule\n - api/forms/FormsModule#see-also\n - api/forms/MaxLengthValidator\n - api/forms/MaxValidator\n - api/forms/MinLengthValidator\n - api/forms/MinValidator\n - api/forms/NG_VALIDATORS\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/RequiredValidator\n - api/forms/SelectControlValueAccessor\n - api/forms/SelectMultipleControlValueAccessor\n - https://github.com/angular/angular/edit/master/packages/forms/src/form_providers.ts?message=docs(forms)%3A%20describe%20your%20change...#L12-L30\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/form_providers.ts#L12-L30\n-->"
|
|
} |