SelectControlValueAccessor

Stable Directive

What it does

Writes values and listens to changes on a select element.

Used by NgModel, FormControlDirective, and FormControlName to keep the view synced with the FormControl model.

How to use

If you have imported the FormsModule or the ReactiveFormsModule, this value accessor will be active on any select control that has a form directive. You do not need to add a special selector to activate it.

How to use select controls with form directives

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

If your option values are simple strings, you can bind to the normal value property on the option. If your option values happen to be objects (and you'd like to save the selection in your form as an object), use ngValue instead:

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'},
  ];
}

In reactive forms, you'll also want to add your form directive (formControlName or formControl) on the main <select> tag. Like in the former example, you have the choice of binding to the value or ngValue property on the select's options.

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]),
  });
}

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/

• npm package: @angular/forms

Class Overview

class SelectControlValueAccessor implements ControlValueAccessor {
  constructor(_renderer: Renderer, _elementRef: ElementRef)
  
  
  value : any
  onChange : (_: any) => {}
  onTouched : () => {}
  writeValue(value: any) : void
  registerOnChange(fn: (value: any) => any) : void
  registerOnTouched(fn: () => any) : void
  setDisabledState(isDisabled: boolean) : void
}

Selectors

select:not([multiple])[formControlName]

select:not([multiple])[formControl]

select:not([multiple])[ngModel]

Class Description

Constructor

constructor(_renderer: Renderer, _elementRef: ElementRef)

Class Details

value : any

onChange : (_: any) => {}

onTouched : () => {}

writeValue(value: any) : void

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

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

setDisabledState(isDisabled: boolean) : void

exported from @angular/forms/index, defined in @angular/forms/src/directives/select_control_value_accessor.ts