SelectControlValueAccessor

directive

The ControlValueAccessor for writing select control values and listening to select control changes. The value accessor is used by the FormControlDirective, FormControlName, and NgModel directives.

NgModules

Selectors

select:not([multiple])[formControlName]
select:not([multiple])[formControl]
select:not([multiple])[ngModel]

Properties

Property	Description
`value: any`
`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 select controls in a reactive form

The following examples show how to use a select control in a reactive form.

      
      import {Component} from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';
 
@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form">
      <select formControlName="state">
        <option *ngFor="let state of states" [ngValue]="state">
          {{ state.abbrev }}
        </option>
      </select>
    </form>
    
     <p>Form value: {{ form.value | json }}</p> 
     <!-- {state: {name: 'New York', abbrev: 'NY'} } -->
  `,
})
export class ReactiveSelectComp {
  states = [
    {name: 'Arizona', abbrev: 'AZ'},
    {name: 'California', abbrev: 'CA'},
    {name: 'Colorado', abbrev: 'CO'},
    {name: 'New York', abbrev: 'NY'},
    {name: 'Pennsylvania', abbrev: 'PA'},
  ];
 
  form = new FormGroup({
    state: new FormControl(this.states[3]),
  });
}

Using select controls in a template-driven form

To use a select in a template-driven form, simply add an ngModel and a name attribute to the main <select> tag.

      
      import {Component} from '@angular/core';
 
@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm">
      <select name="state" ngModel>
        <option value="" disabled>Choose a state</option>
        <option *ngFor="let state of states" [ngValue]="state">
          {{ state.abbrev }}
        </option>
      </select>
    </form>
    
     <p>Form value: {{ f.value | json }}</p>
     <!-- example value: {state: {name: 'New York', abbrev: 'NY'} } -->
  `,
})
export class SelectControlComp {
  states = [
    {name: 'Arizona', abbrev: 'AZ'},
    {name: 'California', abbrev: 'CA'},
    {name: 'Colorado', abbrev: 'CO'},
    {name: 'New York', abbrev: 'NY'},
    {name: 'Pennsylvania', abbrev: 'PA'},
  ];
}

Customizing option selection

Angular uses object identity to select option. It's possible for the identities of items to change while the data does not. This can happen, for example, if the items are produced from an RPC to the server, and that RPC is re-run. Even if the data hasn't changed, the second response will produce objects with different identities.

To customize the default option comparison algorithm, <select> supports compareWith input. compareWith takes a function which has two arguments: option1 and option2. If compareWith is given, Angular selects option by the return value of the function.

      
      const selectedCountriesControl = new FormControl();

      
      <select [compareWith]="compareFn"  [formControl]="selectedCountriesControl">
    <option *ngFor="let country of countries" [ngValue]="country">
        {{country.name}}
    </option>
</select>

compareFn(c1: Country, c2: Country): boolean {
    return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

Note: We listen to the 'change' event because 'input' events aren't fired for selects in Firefox and IE: https://bugzilla.mozilla.org/show_bug.cgi?id=1024350 https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4660045/

Methods

writeValue()

Sets the "value" property on the input element. The "selectedIndex" property is also set if an ID is provided on the option element.

      
      writeValue(value: any): void

Parameters

value

any

The checked value

Returns

void

registerOnChange()

Registers a function called when the control value changes.

      
      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