Установка значения по умолчанию в dropdown Angular 2

Быстрый ответ

Для установки значений по умолчанию в выпадающем списке в Angular задайте свойство компонента этим значением и свяжите его с элементом <select> посредством [(ngModel)]. Тогда <option> с соответствующим value будет выбран автоматически.

// В компоненте Angular
selectedOption = 'defaultOption';

<!-- В HTML-шаблоне вашего компонента -->
<select [(ngModel)]="selectedOption">
  <option value="defaultOption">По умолчанию</option>
  <option value="otherOption">Другой вариант</option>
</select>

Убедитесь, что значение defaultOption соответствует одному из вариантов в выпадающем списке.

Управление опциями на основе объектов

Если список опций представляет собой объекты, применяйте директивы [ngValue] и compareWith для более удобной работы с объектными структурами.

// TypeScript файл компонента
selectedWorkout = { id: 2, name: 'Спина' };
workouts = [
  { id: 1, name: 'Грудь' },
  { id: 2, name: 'Спина' },
  { id: 3, name: 'Ноги' }
];

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

<!-- HTML-шаблон компонента -->
<select [(ngModel)]="selectedWorkout" [compareWith]="compareFn">
  <option *ngFor="let workout of workouts" [ngValue]="workout">
    {{ workout.name }}
  </option>
</select>

Динамическая установка значения по умолчанию

В случае если значение по умолчанию нужно менять динамически, задайте его напрямую через модель, или используйте атрибут [selected] с директивой *ngFor для отметки опции как выбранной.

setDefaultOption() {
  this.selectedOption = this.options.find(opt => opt.isDefault);
}

<select [(ngModel)]="selectedOption">
  <option *ngFor="let option of options" [value]="option.value" [selected]="option.isDefault">{{ option.label }}</option>
</select>

Визуализация

Заметим представить выпадающий список как тихий сад (<select>), где каждая опция – это цветок (<option>):

🌼 – Опция 1
🌻 – Опция 2 (выбрана по умолчанию)
🌸 – Опция 3

Чтобы выделить подсолнуха (🌻) как опции по умолчанию, расположим его в центре сада:

<select>
  <option value="1">🌼 Опция 1</option>
  <option value="2" selected>🌻 Опция 2 (По умолчанию)</option>
  <option value="3">🌸 Опция 3</option>
</select>

И тогда в нашем саду появится своя ведущая звезда.

Гибкое использование FormControl

Если вам предстоит работа с реактивными формами, задайте выбранное значение по умолчанию с помощью FormControl внутри FormGroup. Это мощный инструмент управления формами, обладающий возможностями контроля состояний и валидации.

// В компоненте с использованием FormControl
myForm = new FormGroup({
  selectedWorkout: new FormControl(this.workouts[1])
});

<!-- Реактивная форма -->
<form [formGroup]="myForm">
  <select formControlName="selectedWorkout">
    <option *ngFor="let workout of workouts" [ngValue]="workout">
      {{ workout.name }}
    </option>
  </select>
</form>

Не пренебрегайте следованием лучшим практикам

Соблюдение наилучших практик поможет вам быстрее и качественнее освоить установку значений по умолчанию в выпадающих списках Angular:

• Всегда имейте подготовленное значение по умолчанию, даже если данные еще не загружены.
• При асинхронной загрузке данных обязательно обновляйте вашу модель, чтобы отобразить изменения в интерфейсе.
• Если вы столкнулись с проблемами при установке выбора по умолчанию, проверьте, соответствует ли значение модели одному из вариантов списка.
• Для обеспечения доступности используйте атрибуты ARIA, чтобы упростить пользователю вспомогательных технологий работу со значениями по умолчанию.

Полезные материалы

1. Документация Angular API для SelectControlValueAccessor — Познакомьтесь с SelectControlValueAccessor в Angular.
2. Элемент <select> в HTML – MDN — Подробное руководство по элементу <select>.
3. Привязка элемента Select к объекту в Angular 2+ — Расширенное объяснение привязки объектов к элементу <select> в Angular.
4. Как создать настраиваемые выпадающие списки — Учебник по созданию пользовательских выпадающих списков.
5. Управление валидацией с помощью Angular Form Builder – Angular 17 | 16 — Подробности об использовании FormArray для выбора нескольких вариантов в Angular.
6. Руководство по формам Angular: шаблонные и реактивные — Перспективы Angular в работе с формами.
7. Примеры компонента Select из Angular Components – GitHub — Официальные примеры использования компонента select в Angular Material.