SelectMultipleControlValueAccessor
SelectMultipleControlValueAccessor
directive
The ControlValueAccessor
for writing multi-select control values and listening to multi-select control changes. The value accessor is used by the FormControlDirective
, FormControlName
, and NgModel
directives.
See also
SelectControlValueAccessor
NgModules
-
ReactiveFormsModule
-
FormsModule
Selectors
select[multiple][formControlName]
select[multiple][formControl]
select[multiple][ngModel]
Properties
Property | Description |
---|---|
value: any
|
The current value |
onChange: (_: any) => { }
|
The registered callback function called when a change event occurs on the input element. |
onTouched: () => { }
|
The registered callback function called when a blur event occurs on the input element. |
@Input()compareWith: (o1: any, o2: any) => boolean
|
Write-Only Tracks the option comparison algorithm for tracking identities when checking for changes. |
Description
Using a multi-select control
The follow example shows you how to use a multi-select control with a reactive form.
const countryControl = new FormControl();
<select multiple name="countries" [formControl]="countryControl"> <option *ngFor="let country of countries" [ngValue]="country"> {{ country.name }} </option> </select>
Customizing option selection
To customize the default option comparison algorithm, <select>
supports compareWith
input. See the SelectControlValueAccessor
for usage.
Methods
writeValue() | |||
---|---|---|---|
Sets the "value" property on one or of more of the select's options. | |||
writeValue(value: any): voidParameters
Returns
|
registerOnChange() | |||
---|---|---|---|
Registers a function called when the control value changes and writes an array of the selected options. | |||
registerOnChange(fn: (value: any) => any): voidParameters
Returns
|
registerOnTouched() | |||
---|---|---|---|
Registers a function called when the control is touched. | |||
registerOnTouched(fn: () => any): voidParameters
Returns
|
setDisabledState() | |||
---|---|---|---|
Sets the "disabled" property on the select input element. | |||
setDisabledState(isDisabled: boolean): voidParameters
Returns
|
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v8.angular.io/api/forms/SelectMultipleControlValueAccessor