SelectControlValueAccessor

Stable Directive

Что он делает

Записывает значения и прослушивает изменения в элементе select.

Используется NgModel, FormControlDirective и FormControlName для синхронизации представления с моделью FormControl.

Как использовать

Если вы импортировали FormsModule или ReactiveFormsModule, этот обработчик значений будет активен для любого элемента управления select, у которого есть директива формы. Вам не нужно добавлять специальный селектор, чтобы активировать его.

Использование элементов select с директивами форм

Чтобы использовать select в форме с управляемым шаблоном, просто добавьте атрибут ngModel и атрибут name к основному тегу <select>.

Если значения опций — это простые строки, вы можете привязаться к обычному свойству value опции. Если значения опций — это объекты (и вы хотите сохранить выбор в форме как объект), используйте ngValue.

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

В реактивных формах вам также нужно добавить директиву формы (formControlName или formControl) к основному тегу <select>. Как и в предыдущем примере, вы можете привязаться к свойству value или ngValue опций select.

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

Примечание: Мы прослушиваем событие 'change', потому что события 'input' не генерируются для select в Firefox и IE: https://bugzilla.mozilla.org/show_bug.cgi?id=1024350 https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4660045/

• npm пакет: @angular/forms

Обзор класса

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
}

Селекторы

select:not([multiple])[formControlName]

select:not([multiple])[formControl]

select:not([multiple])[ngModel]

Описание класса

Конструктор

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

экспортировано из @angular/forms/index, определено в @angular/forms/src/directives/select_control_value_accessor.ts