Help Angular by taking a 1 minute survey!Go to surveyHome

SelectMultipleControlValueAccessor

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

NgModules

Selectors

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();
      
      const countryControl = new FormControl();
    
<select multiple name="countries" [formControl]="countryControl"> <option *ngFor="let country of countries" [ngValue]="country"> {{ country.name }} </option> </select>
      
      <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

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

writeValue(value: any): void
      
      writeValue(value: any): void
    
Parameters
value any

The value

Returns

void

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

registerOnChange(fn: (value: any) => any): void
      
      registerOnChange(fn: (value: any) => any): void
    
Parameters
fn (value: any) => any

The callback function

Returns

void

Registers a function called when the control is touched.

registerOnTouched(fn: () => any): void
      
      registerOnTouched(fn: () => any): void
    
Parameters
fn () => any

The callback function

Returns

void

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

setDisabledState(isDisabled: boolean): void
      
      setDisabledState(isDisabled: boolean): void
    
Parameters
isDisabled boolean

The disabled value

Returns

void