@angular/forms

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.

  
    class SelectMultipleControlValueAccessor extends BuiltInControlValueAccessor implements ControlValueAccessor {}

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.

value

any

The current value.

compareWith

(o1: any, o2: any) => boolean

Tracks the option comparison algorithm for tracking identities when checking for changes.

writeValue

void

Sets the "value" property on one or of more of the select's options.

@paramvalueany

@returnsvoid

registerOnChange

void

Registers a function called when the control value changes and writes an array of the selected options.

@paramfn(value: any) => any

@returnsvoid

onChange

(_: any) => void

The registered callback function called when a change or input event occurs on the input element.

onTouched

() => void

The registered callback function called when a blur event occurs on the input element.

setProperty

void

Helper method that sets a property on a target element using the current Renderer implementation.

@paramkeystring

@paramvalueany

@returnsvoid

registerOnTouched

void

Registers a function called when the control is touched.

@paramfn() => void

@returnsvoid

setDisabledState

void

Sets the "disabled" property on the range input element.

@paramisDisabledboolean

@returnsvoid