SelectControlValueAccessor

ControlValueAccessor для записи значений элемента управления select и отслеживания изменений элемента управления select. Аксессор значений используется директивами FormControlDirective, FormControlName и NgModel.

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

В следующих примерах показано, как использовать элемент управления select в реактивной форме.

import {Component} from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'example-app',
  template: `
    <form [formGroup]="form">
      <select formControlName="state">
        @for (state of states; track $index) {
          <option [ngValue]="state">{{ state.abbrev }}</option>
        }
      </select>
    </form>

    <p>Form value: {{ form.value | json }}</p>
    <!-- {state: {name: 'New York', abbrev: 'NY'} } -->
  `,
  standalone: false,
})
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]),
  });
}

Использование элементов управления select в форме на основе шаблона

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

import {Component} from '@angular/core';

@Component({
  selector: 'example-app',
  template: `
    <form #f="ngForm">
      <select name="state" ngModel>
        <option value="" disabled>Choose a state</option>
        @for (state of states; track $index) {
          <option [ngValue]="state">{{ state.abbrev }}</option>
        }
      </select>
    </form>

    <p>Form value: {{ f.value | json }}</p>
    <!-- example value: {state: {name: 'New York', abbrev: 'NY'} } -->
  `,
  standalone: false,
})
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'},
  ];
}

Настройка выбора параметров

Angular использует идентичность объектов для выбора параметра. Идентификаторы элементов могут измениться, даже если данные остаются прежними. Например, это может произойти, если элементы получены от сервера посредством RPC-запроса, а этот запрос выполняется повторно. Даже если данные не изменились, во втором ответе будут объекты с другими идентификаторами.

Чтобы настроить алгоритм сравнения параметров по умолчанию, <select> поддерживает входной параметр compareWith. compareWith принимает функцию с двумя аргументами: option1 и option2. Если задан compareWith, Angular выбирает параметр по возвращаемому функцией значению.

const selectedCountriesControl = new FormControl();

<select [compareWith]="compareFn"  [formControl]="selectedCountriesControl">
   @for(country of countries; track $index) {
       <option[ngValue]="country">{{country.name}}</option>
   }
</select>

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

Примечание: Мы отслеживаем событие 'change', поскольку события 'input' для элементов select в IE не генерируются. См. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event#browser_compatibility