{ "id": "api/forms/SelectControlValueAccessor", "title": "SelectControlValueAccessor", "contents": "\n\n
\n
\n
\n \n API > @angular/forms\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

SelectControlValueAccessorlink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

The ControlValueAccessor for writing select control values and listening to select control\nchanges. The value accessor is used by the FormControlDirective, FormControlName, and\nNgModel directives.

\n\n \n
\n \n \n \n \n\n

NgModuleslink

\n\n\n\n \n
\n

Selectorslink

\n \n \n \n
\n\n\n\n \n\n
\n

Propertieslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyDescription
\n \n @Input()
compareWith: (o1: any, o2: any) => boolean\n 		Write-Only\n \n

Tracks the option comparison algorithm for tracking identities when\nchecking for changes.

\n\n \n
\n
\n\n\n\n \n\n\n \n
\n

Descriptionlink

\n \n

Using select controls in a reactive formlink

\n

The following examples show how to use a select control in a reactive form.

\n\nimport {Component} from '@angular/core';\nimport {FormControl, FormGroup} from '@angular/forms';\n\n@Component({\n selector: 'example-app',\n template: `\n <form [formGroup]=\"form\">\n <select formControlName=\"state\">\n <option *ngFor=\"let state of states\" [ngValue]=\"state\">\n {{ state.abbrev }}\n </option>\n </select>\n </form>\n\n <p>Form value: {{ form.value | json }}</p>\n <!-- {state: {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 FormGroup({\n state: new FormControl(this.states[3]),\n });\n}\n\n\n

Using select controls in a template-driven formlink

\n

To use a select in a template-driven form, simply add an ngModel and a name\nattribute to the main <select> tag.

\n\nimport {Component} from '@angular/core';\n\n@Component({\n selector: 'example-app',\n template: `\n <form #f=\"ngForm\">\n <select name=\"state\" ngModel>\n <option value=\"\" disabled>Choose a state</option>\n <option *ngFor=\"let state of states\" [ngValue]=\"state\">\n {{ state.abbrev }}\n </option>\n </select>\n </form>\n\n <p>Form value: {{ f.value | json }}</p>\n <!-- example value: {state: {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\n

Customizing option selectionlink

\n

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.

\n

To customize the default option comparison algorithm, <select> supports compareWith input.\ncompareWith takes a function which has two arguments: option1 and option2.\nIf compareWith is given, Angular selects option by the return value of the function.

\n\nconst selectedCountriesControl = new FormControl();\n\n\n<select [compareWith]=\"compareFn\" [formControl]=\"selectedCountriesControl\">\n <option *ngFor=\"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\n

Note: We listen to the 'change' event because 'input' events aren't fired\nfor selects in IE, see:\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event#browser_compatibility

\n\n
\n \n\n \n\n \n\n \n\n \n \n \n\n
\n
\n\n\n" }