5 lines
22 KiB
JSON
5 lines
22 KiB
JSON
{
|
|
"id": "api/forms/ControlValueAccessor",
|
|
"title": "ControlValueAccessor",
|
|
"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/ControlValueAccessor\", \"name\": \"ControlValueAccessor\" } }\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/directives/control_value_accessor.ts?message=docs(forms)%3A%20describe%20your%20change...#L10-L132\" 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/directives/control_value_accessor.ts#L10-L132\" 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=\"controlvalueaccessor\">ControlValueAccessor<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/ControlValueAccessor#controlvalueaccessor\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label interface\">interface</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>Defines an interface that acts as a bridge between the Angular forms API and a\nnative element in the DOM.</p>\n\n <p><a href=\"api/forms/ControlValueAccessor#description\">See more...</a></p>\n </section>\n \n \n <section class=\"interface-overview\">\n<code-example language=\"ts\" hidecopy=\"true\">\ninterface <a href=\"api/forms/ControlValueAccessor\" class=\"code-anchor\">ControlValueAccessor</a> {\n <a class=\"code-anchor\" href=\"api/forms/ControlValueAccessor#writeValue\"><span class=\"member-name\">writeValue</span>(obj: any): void</a>\n <a class=\"code-anchor\" href=\"api/forms/ControlValueAccessor#registerOnChange\"><span class=\"member-name\">registerOnChange</span>(fn: any): void</a>\n <a class=\"code-anchor\" href=\"api/forms/ControlValueAccessor#registerOnTouched\"><span class=\"member-name\">registerOnTouched</span>(fn: any): void</a>\n <a class=\"code-anchor\" href=\"api/forms/ControlValueAccessor#setDisabledState\"><span class=\"member-name\">setDisabledState</span>(isDisabled: boolean)?: void</a>\n}\n</code-example>\n\n \n \n\n\n \n \n <div class=\"descendants class\">\n <h2 id=\"class-implementations\">Class implementations<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/ControlValueAccessor#class-implementations\"><i class=\"material-icons\">link</i></a></h2>\n \n\n<ul>\n \n <li>\n <code><a href=\"api/forms/CheckboxControlValueAccessor\" class=\"code-anchor\">CheckboxControlValueAccessor</a></code>\n \n\n\n </li>\n \n <li>\n <code><a href=\"api/forms/DefaultValueAccessor\" class=\"code-anchor\">DefaultValueAccessor</a></code>\n \n\n\n </li>\n \n <li>\n <code><a href=\"api/forms/NumberValueAccessor\" class=\"code-anchor\">NumberValueAccessor</a></code>\n \n\n\n </li>\n \n <li>\n <code><a href=\"api/forms/RadioControlValueAccessor\" class=\"code-anchor\">RadioControlValueAccessor</a></code>\n \n\n\n </li>\n \n <li>\n <code><a href=\"api/forms/RangeValueAccessor\" class=\"code-anchor\">RangeValueAccessor</a></code>\n \n\n\n </li>\n \n <li>\n <code><a href=\"api/forms/SelectControlValueAccessor\" class=\"code-anchor\">SelectControlValueAccessor</a></code>\n \n\n\n </li>\n \n <li>\n <code><a href=\"api/forms/SelectMultipleControlValueAccessor\" class=\"code-anchor\">SelectMultipleControlValueAccessor</a></code>\n \n\n\n </li>\n \n</ul>\n\n\n </div>\n \n\n</section>\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/ControlValueAccessor#see-also\"><i class=\"material-icons\">link</i></a></h2>\n <ul>\n \n <li><p>DefaultValueAccessor</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/ControlValueAccessor#description\"><i class=\"material-icons\">link</i></a></h2>\n <p>Implement this interface to create a custom form control directive\nthat integrates with Angular forms.</p>\n\n \n</section>\n\n \n\n \n\n<section class=\"instance-methods\">\n <h2 id=\"methods\">Methods<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/ControlValueAccessor#methods\"><i class=\"material-icons\">link</i></a></h2>\n \n <a id=\"writeValue\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"writevalue\">\n writeValue()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/ControlValueAccessor#writevalue\"><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/directives/control_value_accessor.ts?message=docs(forms)%3A%20describe%20your%20change...#L24-L44\" 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/directives/control_value_accessor.ts#L24-L44\" 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>Writes a new value to the element.</p>\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\"><span class=\"member-name\">writeValue</span>(obj: any): void</code-example>\n\n \n\n <h6 class=\"no-anchor\" id=\"parameters\">Parameters</h6>\n <table class=\"is-full-width list-table parameters-table instance-method-overload-parameters\">\n <tbody>\n \n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>obj</code>\n </td>\n <td class=\"param-type\"><code>any</code></td>\n <td class=\"param-description\">\n <p>The new value for the element</p>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns\">Returns</h6>\n <p><code>void</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>This method is called by the forms API to write to the view when programmatic\nchanges from model to view are requested.</p>\n\n </td>\n </tr>\n\n <tr>\n <td class=\"usage-notes\">\n <h4 id=\"writeValue-usage-notes\">Usage Notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/ControlValueAccessor#writeValue-usage-notes\"><i class=\"material-icons\">link</i></a></h4>\n <h5 id=\"write-a-value-to-the-element\">Write a value to the element<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/ControlValueAccessor#write-a-value-to-the-element\"><i class=\"material-icons\">link</i></a></h5>\n<p>The following example writes a value to the native DOM element.</p>\n<code-example language=\"ts\">\nwriteValue(value: any): void {\n this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);\n}\n</code-example>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <a id=\"registerOnChange\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"registeronchange\">\n registerOnChange()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/ControlValueAccessor#registeronchange\"><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/directives/control_value_accessor.ts?message=docs(forms)%3A%20describe%20your%20change...#L45-L79\" 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/directives/control_value_accessor.ts#L45-L79\" 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>Registers a callback function that is called when the control's value\nchanges in the UI.</p>\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\"><span class=\"member-name\">registerOnChange</span>(fn: any): void</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 instance-method-overload-parameters\">\n <tbody>\n \n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>fn</code>\n </td>\n <td class=\"param-type\"><code>any</code></td>\n <td class=\"param-description\">\n <p>The callback function to register</p>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns-1\">Returns</h6>\n <p><code>void</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>This method is called by the forms API on initialization to update the form\nmodel when values propagate from the view to the model.</p>\n<p>When implementing the <code>registerOnChange</code> method in your own value accessor,\nsave the given function so your class calls it at the appropriate time.</p>\n\n </td>\n </tr>\n\n <tr>\n <td class=\"usage-notes\">\n <h4 id=\"registerOnChange-usage-notes\">Usage Notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/ControlValueAccessor#registerOnChange-usage-notes\"><i class=\"material-icons\">link</i></a></h4>\n <h5 id=\"store-the-change-function\">Store the change function<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/ControlValueAccessor#store-the-change-function\"><i class=\"material-icons\">link</i></a></h5>\n<p>The following example stores the provided function as an internal method.</p>\n<code-example language=\"ts\">\nregisterOnChange(fn: (_: any) => void): void {\n this._onChange = fn;\n}\n</code-example>\n<p>When the value changes in the UI, call the registered\nfunction to allow the forms API to update itself:</p>\n<code-example language=\"ts\">\nhost: {\n '(change)': '_onChange($event.target.value)'\n}\n</code-example>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <a id=\"registerOnTouched\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"registerontouched\">\n registerOnTouched()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/ControlValueAccessor#registerontouched\"><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/directives/control_value_accessor.ts?message=docs(forms)%3A%20describe%20your%20change...#L80-L112\" 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/directives/control_value_accessor.ts#L80-L112\" 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>Registers a callback function that is called by the forms API on initialization\nto update the form model on blur.</p>\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\"><span class=\"member-name\">registerOnTouched</span>(fn: any): void</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 instance-method-overload-parameters\">\n <tbody>\n \n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>fn</code>\n </td>\n <td class=\"param-type\"><code>any</code></td>\n <td class=\"param-description\">\n <p>The callback function to register</p>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns-2\">Returns</h6>\n <p><code>void</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>When implementing <code>registerOnTouched</code> in your own value accessor, save the given\nfunction so your class calls it when the control should be considered\nblurred or \"touched\".</p>\n\n </td>\n </tr>\n\n <tr>\n <td class=\"usage-notes\">\n <h4 id=\"registerOnTouched-usage-notes\">Usage Notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/ControlValueAccessor#registerOnTouched-usage-notes\"><i class=\"material-icons\">link</i></a></h4>\n <h5 id=\"store-the-callback-function\">Store the callback function<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/ControlValueAccessor#store-the-callback-function\"><i class=\"material-icons\">link</i></a></h5>\n<p>The following example stores the provided function as an internal method.</p>\n<code-example language=\"ts\">\nregisterOnTouched(fn: any): void {\n this._onTouched = fn;\n}\n</code-example>\n<p>On blur (or equivalent), your class should call the registered function to allow\nthe forms API to update itself:</p>\n<code-example language=\"ts\">\nhost: {\n '(blur)': '_onTouched()'\n}\n</code-example>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <a id=\"setDisabledState\"></a>\n<table class=\"is-full-width method-table instance-method\">\n <thead><tr><th>\n <div class=\"with-github-links\">\n <h3 id=\"setdisabledstate\">\n setDisabledState()\n \n <a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/ControlValueAccessor#setdisabledstate\"><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/directives/control_value_accessor.ts?message=docs(forms)%3A%20describe%20your%20change...#L113-L131\" 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/directives/control_value_accessor.ts#L113-L131\" 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>Function that is called by the forms API when the control status changes to\nor from 'DISABLED'. Depending on the status, it enables or disables the\nappropriate DOM element.</p>\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\"><span class=\"member-name\">setDisabledState</span>(isDisabled: boolean)?: void</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 instance-method-overload-parameters\">\n <tbody>\n \n <tr class=\"instance-method-overload-parameter\">\n <td class=\"param-name\">\n <a id=\"\"></a>\n <code>isDisabled</code>\n </td>\n <td class=\"param-type\"><code>boolean</code></td>\n <td class=\"param-description\">\n <p>The disabled status to set on the element</p>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n <h6 class=\"no-anchor\" id=\"returns-3\">Returns</h6>\n <p><code>void</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=\"setDisabledState-usage-notes\">Usage Notes<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/ControlValueAccessor#setDisabledState-usage-notes\"><i class=\"material-icons\">link</i></a></h4>\n <p>The following is an example of writing the disabled property to a native DOM element:</p>\n<code-example language=\"ts\">\nsetDisabledState(isDisabled: boolean): void {\n this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);\n}\n</code-example>\n\n </td>\n </tr>\n </tbody>\n</table>\n\n \n</section>\n\n\n \n\n\n </div>\n</article>\n\n<!-- links to this doc:\n - api/forms\n - api/forms/CheckboxControlValueAccessor\n - api/forms/DefaultValueAccessor\n - api/forms/FormsModule\n - api/forms/NG_VALUE_ACCESSOR\n - api/forms/NgControl\n - api/forms/NumberValueAccessor\n - api/forms/RadioControlValueAccessor\n - api/forms/RangeValueAccessor\n - api/forms/ReactiveFormsModule\n - api/forms/SelectControlValueAccessor\n - api/forms/SelectMultipleControlValueAccessor\n - api/upgrade/UpgradeAdapter\n - guide/built-in-directives\n - guide/forms-overview\n - guide/updating-to-version-11\n-->\n<!-- links from this doc:\n - /api\n - api/forms\n - api/forms/CheckboxControlValueAccessor\n - api/forms/ControlValueAccessor#class-implementations\n - api/forms/ControlValueAccessor#controlvalueaccessor\n - api/forms/ControlValueAccessor#description\n - api/forms/ControlValueAccessor#methods\n - api/forms/ControlValueAccessor#registerOnChange\n - api/forms/ControlValueAccessor#registerOnChange-usage-notes\n - api/forms/ControlValueAccessor#registerOnTouched\n - api/forms/ControlValueAccessor#registerOnTouched-usage-notes\n - api/forms/ControlValueAccessor#registeronchange\n - api/forms/ControlValueAccessor#registerontouched\n - api/forms/ControlValueAccessor#see-also\n - api/forms/ControlValueAccessor#setDisabledState\n - api/forms/ControlValueAccessor#setDisabledState-usage-notes\n - api/forms/ControlValueAccessor#setdisabledstate\n - api/forms/ControlValueAccessor#store-the-callback-function\n - api/forms/ControlValueAccessor#store-the-change-function\n - api/forms/ControlValueAccessor#write-a-value-to-the-element\n - api/forms/ControlValueAccessor#writeValue\n - api/forms/ControlValueAccessor#writeValue-usage-notes\n - api/forms/ControlValueAccessor#writevalue\n - api/forms/DefaultValueAccessor\n - api/forms/NumberValueAccessor\n - api/forms/RadioControlValueAccessor\n - api/forms/RangeValueAccessor\n - api/forms/SelectControlValueAccessor\n - api/forms/SelectMultipleControlValueAccessor\n - https://github.com/angular/angular/edit/master/packages/forms/src/directives/control_value_accessor.ts?message=docs(forms)%3A%20describe%20your%20change...#L10-L132\n - https://github.com/angular/angular/edit/master/packages/forms/src/directives/control_value_accessor.ts?message=docs(forms)%3A%20describe%20your%20change...#L113-L131\n - https://github.com/angular/angular/edit/master/packages/forms/src/directives/control_value_accessor.ts?message=docs(forms)%3A%20describe%20your%20change...#L24-L44\n - https://github.com/angular/angular/edit/master/packages/forms/src/directives/control_value_accessor.ts?message=docs(forms)%3A%20describe%20your%20change...#L45-L79\n - https://github.com/angular/angular/edit/master/packages/forms/src/directives/control_value_accessor.ts?message=docs(forms)%3A%20describe%20your%20change...#L80-L112\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/directives/control_value_accessor.ts#L10-L132\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/directives/control_value_accessor.ts#L113-L131\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/directives/control_value_accessor.ts#L24-L44\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/directives/control_value_accessor.ts#L45-L79\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/directives/control_value_accessor.ts#L80-L112\n-->"
|
|
} |