5 lines
13 KiB
JSON
5 lines
13 KiB
JSON
{
|
|
"id": "api/forms/SelectControlValueAccessor",
|
|
"title": "SelectControlValueAccessor",
|
|
"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/SelectControlValueAccessor\", \"name\": \"SelectControlValueAccessor\" } }\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/select_control_value_accessor.ts?message=docs(forms)%3A%20describe%20your%20change...#L28-L193\" 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/select_control_value_accessor.ts#L28-L193\" 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=\"selectcontrolvalueaccessor\">SelectControlValueAccessor<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/SelectControlValueAccessor#selectcontrolvalueaccessor\"><i class=\"material-icons\">link</i></a></h1>\n \n <label class=\"api-type-label directive\">directive</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>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 \n </section>\n \n \n \n \n\n <h2 id=\"ngmodules\">NgModules<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/SelectControlValueAccessor#ngmodules\"><i class=\"material-icons\">link</i></a></h2>\n<ul class=\"ngmodule-list\">\n\n <li>\n <a href=\"api/forms/ReactiveFormsModule\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">ReactiveFormsModule</code-example>\n </a>\n </li>\n \n <li>\n <a href=\"api/forms/FormsModule\">\n <code-example language=\"ts\" hidecopy=\"true\" class=\"no-box\">FormsModule</code-example>\n </a>\n </li>\n \n</ul>\n\n\n \n<section class=\"selector-list\">\n <h2 id=\"selectors\">Selectors<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/SelectControlValueAccessor#selectors\"><i class=\"material-icons\">link</i></a></h2>\n \n <ul>\n <li><code>select<i>:not([<a href=\"api/forms/SelectMultipleControlValueAccessor\" class=\"code-anchor\">multiple</a>])</i>[<a href=\"api/forms/FormControlName\" class=\"code-anchor\">formControlName</a>]</code></li>\n \n <li><code>select<i>:not([<a href=\"api/forms/SelectMultipleControlValueAccessor\" class=\"code-anchor\">multiple</a>])</i>[formControl]</code></li>\n \n <li><code>select<i>:not([<a href=\"api/forms/SelectMultipleControlValueAccessor\" class=\"code-anchor\">multiple</a>])</i>[<a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>]</code></li>\n \n </ul>\n \n</section>\n\n\n\n \n\n<section class=\"instance-properties\">\n <h2 id=\"properties\">Properties<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/SelectControlValueAccessor#properties\"><i class=\"material-icons\">link</i></a></h2>\n <table class=\"is-full-width list-table property-table\">\n <thead>\n <tr>\n <th>Property</th>\n <th>Description</th>\n </tr>\n </thead>\n <tbody>\n \n <tr class=\"instance-property\">\n <td>\n <a id=\"compareWith\"></a>\n <code class=\"\"><span class=\"property-binding\">@<a href=\"api/core/Input\" class=\"code-anchor\">Input</a>()</span><br><span class=\"member-name\">compareWith</span>: (o1: any, o2: any) => boolean</code>\n </td>\n <td><span class=\"write-only-property\">Write-Only</span>\n \n <p>Tracks the option comparison algorithm for tracking identities when\nchecking for changes.</p>\n\n \n </td>\n </tr>\n \n </tbody>\n </table>\n</section>\n\n\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/SelectControlValueAccessor#description\"><i class=\"material-icons\">link</i></a></h2>\n \n <h3 id=\"using-select-controls-in-a-reactive-form\">Using select controls in a reactive form<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/SelectControlValueAccessor#using-select-controls-in-a-reactive-form\"><i class=\"material-icons\">link</i></a></h3>\n<p>The following examples show how to use a select control in a reactive form.</p>\n<code-example path=\"forms/ts/reactiveSelectControl/reactive_select_control_example.ts\" region=\"Component\">\nimport {<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>} from '@angular/core';\nimport {<a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a>, <a href=\"api/forms/FormGroup\" class=\"code-anchor\">FormGroup</a>} from '@angular/forms';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'example-app',\n template: `\n <form [formGroup]=\"form\">\n <select <a href=\"api/forms/FormControlName\" class=\"code-anchor\">formControlName</a>=\"<a href=\"api/animations/state\" class=\"code-anchor\">state</a>\">\n <option *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let <a href=\"api/animations/state\" class=\"code-anchor\">state</a> of states\" [ngValue]=\"<a href=\"api/animations/state\" class=\"code-anchor\">state</a>\">\n {{ state.abbrev }}\n </option>\n </select>\n </form>\n\n <p><a href=\"api/forms/Form\" class=\"code-anchor\">Form</a> value: {{ form.value | <a href=\"api/common/JsonPipe\" class=\"code-anchor\">json</a> }}</p>\n <!-- {<a href=\"api/animations/state\" class=\"code-anchor\">state</a>: {name: 'New York', abbrev: 'NY'} } -->\n `,\n})\nexport class ReactiveSelectComp {\n states = [\n {name: 'Arizona', abbrev: 'AZ'},\n {name: 'California', abbrev: 'CA'},\n {name: 'Colorado', abbrev: 'CO'},\n {name: 'New York', abbrev: 'NY'},\n {name: 'Pennsylvania', abbrev: 'PA'},\n ];\n\n form = new <a href=\"api/forms/FormGroup\" class=\"code-anchor\">FormGroup</a>({\n <a href=\"api/animations/state\" class=\"code-anchor\">state</a>: new <a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a>(this.states[3]),\n });\n}\n\n</code-example>\n<h3 id=\"using-select-controls-in-a-template-driven-form\">Using select controls in a template-driven form<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/SelectControlValueAccessor#using-select-controls-in-a-template-driven-form\"><i class=\"material-icons\">link</i></a></h3>\n<p>To use a select in a template-driven form, simply add an <code><a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a></code> and a <code>name</code>\nattribute to the main <code><select></code> tag.</p>\n<code-example path=\"forms/ts/selectControl/select_control_example.ts\" region=\"Component\">\nimport {<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>} from '@angular/core';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'example-app',\n template: `\n <form #f=\"<a href=\"api/forms/NgForm\" class=\"code-anchor\">ngForm</a>\">\n <select name=\"<a href=\"api/animations/state\" class=\"code-anchor\">state</a>\" <a href=\"api/forms/NgModel\" class=\"code-anchor\">ngModel</a>>\n <option value=\"\" disabled>Choose a <a href=\"api/animations/state\" class=\"code-anchor\">state</a></option>\n <option *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let <a href=\"api/animations/state\" class=\"code-anchor\">state</a> of states\" [ngValue]=\"<a href=\"api/animations/state\" class=\"code-anchor\">state</a>\">\n {{ state.abbrev }}\n </option>\n </select>\n </form>\n\n <p><a href=\"api/forms/Form\" class=\"code-anchor\">Form</a> value: {{ f.value | <a href=\"api/common/JsonPipe\" class=\"code-anchor\">json</a> }}</p>\n <!-- example value: {<a href=\"api/animations/state\" class=\"code-anchor\">state</a>: {name: 'New York', abbrev: 'NY'} } -->\n `,\n})\nexport class SelectControlComp {\n states = [\n {name: 'Arizona', abbrev: 'AZ'},\n {name: 'California', abbrev: 'CA'},\n {name: 'Colorado', abbrev: 'CO'},\n {name: 'New York', abbrev: 'NY'},\n {name: 'Pennsylvania', abbrev: 'PA'},\n ];\n}\n\n</code-example>\n<h3 id=\"customizing-option-selection\">Customizing option selection<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"api/forms/SelectControlValueAccessor#customizing-option-selection\"><i class=\"material-icons\">link</i></a></h3>\n<p>Angular uses object identity to select option. It's possible for the identities of items\nto change while the data does not. This can happen, for example, if the items are produced\nfrom an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the\nsecond response will produce objects with different identities.</p>\n<p>To customize the default option comparison algorithm, <code><select></code> supports <code>compareWith</code> input.\n<code>compareWith</code> takes a <strong>function</strong> which has two arguments: <code>option1</code> and <code>option2</code>.\nIf <code>compareWith</code> is given, Angular selects option by the return value of the function.</p>\n<code-example language=\"ts\">\nconst selectedCountriesControl = new <a href=\"api/forms/FormControl\" class=\"code-anchor\">FormControl</a>();\n</code-example>\n<code-example>\n<select [compareWith]=\"compareFn\" [formControl]=\"selectedCountriesControl\">\n <option *<a href=\"api/common/NgForOf\" class=\"code-anchor\">ngFor</a>=\"let country of countries\" [ngValue]=\"country\">\n {{country.name}}\n </option>\n</select>\n\ncompareFn(c1: Country, c2: Country): boolean {\n return c1 && c2 ? c1.id === c2.id : c1 === c2;\n}\n</code-example>\n<p><strong>Note:</strong> We listen to the 'change' event because 'input' events aren't fired\nfor selects in IE, see:\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event#browser_compatibility\">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event#browser_compatibility</a></p>\n\n </section>\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/ControlValueAccessor\n - api/forms/FormControlName\n - api/forms/FormsModule\n - api/forms/NgModel\n - api/forms/NgSelectOption\n - api/forms/ReactiveFormsModule\n - api/forms/SelectMultipleControlValueAccessor\n-->\n<!-- links from this doc:\n - /api\n - api/animations/state\n - api/common/JsonPipe\n - api/common/NgForOf\n - api/core/Component\n - api/core/Input\n - api/forms\n - api/forms/ControlValueAccessor\n - api/forms/Form\n - api/forms/FormControl\n - api/forms/FormControlDirective\n - api/forms/FormControlName\n - api/forms/FormGroup\n - api/forms/FormsModule\n - api/forms/NgForm\n - api/forms/NgModel\n - api/forms/ReactiveFormsModule\n - api/forms/SelectControlValueAccessor#customizing-option-selection\n - api/forms/SelectControlValueAccessor#description\n - api/forms/SelectControlValueAccessor#ngmodules\n - api/forms/SelectControlValueAccessor#properties\n - api/forms/SelectControlValueAccessor#selectcontrolvalueaccessor\n - api/forms/SelectControlValueAccessor#selectors\n - api/forms/SelectControlValueAccessor#using-select-controls-in-a-reactive-form\n - api/forms/SelectControlValueAccessor#using-select-controls-in-a-template-driven-form\n - api/forms/SelectMultipleControlValueAccessor\n - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event#browser_compatibility\n - https://github.com/angular/angular/edit/master/packages/forms/src/directives/select_control_value_accessor.ts?message=docs(forms)%3A%20describe%20your%20change...#L28-L193\n - https://github.com/angular/angular/tree/12.0.0-next.7/packages/forms/src/directives/select_control_value_accessor.ts#L28-L193\n-->"
|
|
} |