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

  ReactiveFormsModule

• ../formsmodule

  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): void Parameters value any The value Returns void

registerOnChange()
Registers a function called when the control value changes and writes an array of the selected options.
registerOnChange(fn: (value: any) => any): void Parameters fn (value: any) => any The callback function Returns void

registerOnTouched()
Registers a function called when the control is touched.
registerOnTouched(fn: () => any): void Parameters fn () => any The callback function Returns void

setDisabledState()
Sets the "disabled" property on the select input element.
setDisabledState(isDisabled: boolean): void Parameters isDisabled boolean The disabled value Returns void

© 2010–2019 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v7.angular.io/api/forms/SelectMultipleControlValueAccessor