Переключатели — это основной элемент веб-форм, позволяющий пользователям сделать один выбор из набора параметров. В Angular Material, популярной библиотеке компонентов пользовательского интерфейса для Angular, работать с переключателями очень просто. В этой статье мы рассмотрим различные методы установки переключателя, выбранного по умолчанию, в Angular Material, сопровождаемые разговорными объяснениями и примерами кода. К концу вы получите четкое представление о том, как эффективно использовать переключатели в проектах Angular Material.

Метод 1: использование ngModel
Самый простой способ установить выбранный по умолчанию переключатель — использовать директиву ngModel. Привязав ngModel к переменной, вы можете управлять выбранным значением программно. Вот пример:

<mat-radio-group [(ngModel)]="selectedValue">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

В классе компонента:

selectedValue = 'option2';

Метод 2: использование FormControl
Angular Material предоставляет класс FormControl для управления элементами управления формой. Вы можете использовать его для установки переключателя, выбранного по умолчанию. Вот как:

import { FormControl } from '@angular/forms';
// In the component class:
selectedOption = new FormControl('option3');

В шаблоне:

<mat-radio-group [formControl]="selectedOption">
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2">Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

Метод 3: установка значения по умолчанию в HTML
Вы также можете установить выбранный по умолчанию переключатель непосредственно в HTML, используя атрибут checked. Вот пример:

<mat-radio-group>
  <mat-radio-button value="option1">Option 1</mat-radio-button>
  <mat-radio-button value="option2" checked>Option 2</mat-radio-button>
  <mat-radio-button value="option3">Option 3</mat-radio-button>
</mat-radio-group>

В этой статье мы рассмотрели несколько способов установки переключателя, выбранного по умолчанию, в Angular Material. Мы рассмотрели использование ngModel, FormControl и установку значения по умолчанию в HTML. Используя эти методы, вы можете эффективно контролировать выбор переключателей по умолчанию в формах Angular Material. Поэкспериментируйте с этими методами и выберите тот, который лучше всего соответствует требованиям вашего проекта.