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

SelectMultipleControlValueAccessorlink

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

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

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

See alsolink

\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 a multi-select controllink

\n

The follow example shows you how to use a multi-select control with a reactive form.

\n\nconst countryControl = new FormControl();\n\n\n<select multiple name=\"countries\" [formControl]=\"countryControl\">\n <option *ngFor=\"let country of countries\" [ngValue]=\"country\">\n {{ country.name }}\n </option>\n</select>\n\n

Customizing option selectionlink

\n

To customize the default option comparison algorithm, <select> supports compareWith input.\nSee the SelectControlValueAccessor for usage.

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