В Angular работа с флажками — обычная задача при работе с формами и манипулированием данными. Часто возникает один конкретный сценарий — необходимость установить все флажки одним действием, например флажком «Выбрать все». В этой статье мы рассмотрим несколько методов достижения этой функциональности в Angular, а также примеры кода.

Метод 1: использование ссылочной переменной шаблона
Один простой подход — использовать ссылочную переменную шаблона для привязки флажка «Выбрать все» к отдельным флажкам. Вот пример:

<input type="checkbox" #selectAllCheckbox (change)="selectAll(selectAllCheckbox.checked)">
<div *ngFor="let checkbox of checkboxes">
  <input type="checkbox" [(ngModel)]="checkbox.checked">
</div>

checkboxes: { checked: boolean }[] = [
  { checked: false },
  { checked: false },
  { checked: false }
];
selectAll(checked: boolean): void {
  this.checkboxes.forEach(checkbox => checkbox.checked = checked);
}

Метод 2: использование реактивных форм
Если вы используете реактивные формы в Angular, вы можете добиться функциональности «Выбрать все», используя возможности элементов управления формой. Вот пример:

<form [formGroup]="form">
  <input type="checkbox" formControlName="selectAll" (change)="selectAll()">
  <div formArrayName="checkboxes">
    <div *ngFor="let checkbox of checkboxes.controls; let i = index">
      <input type="checkbox" [formControlName]="i">
    </div>
  </div>
</form>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@Component({
  // Component metadata
})
export class MyComponent implements OnInit {
  form: FormGroup;
  constructor(private fb: FormBuilder) {}
  ngOnInit(): void {
    this.form = this.fb.group({
      selectAll: false,
      checkboxes: this.fb.array([
        this.fb.control(false),
        this.fb.control(false),
        this.fb.control(false)
      ])
    });
  }
  selectAll(): void {
    const selectAllValue = this.form.get('selectAll').value;
    const checkboxesArray = this.form.get('checkboxes') as FormArray;
    checkboxesArray.controls.forEach(control => control.setValue(selectAllValue));
  }
}

Метод 3: использование ViewChild
Другой подход предполагает использование декоратора ViewChild для доступа к флажкам непосредственно из компонента. Вот пример:

<input type="checkbox" #selectAllCheckbox (change)="selectAll()">
<div *ngFor="let checkbox of checkboxes">
  <input type="checkbox" [(ngModel)]="checkbox.checked">
</div>

import { Component, ViewChild, QueryList, ViewChildren } from '@angular/core';
@Component({
  // Component metadata
})
export class MyComponent {
  @ViewChild('selectAllCheckbox') selectAllCheckbox: any;
  @ViewChildren('checkboxes') checkboxes: QueryList<any>;
  selectAll(): void {
    const selectAllValue = this.selectAllCheckbox.nativeElement.checked;
    this.checkboxes.forEach(checkbox => checkbox.nativeElement.checked = selectAllValue);
  }
}

В этой статье мы рассмотрели три различных метода реализации функции «Выбрать все» для флажков в Angular. В первом методе использовалась ссылочная переменная шаблона, во втором методе использовались реактивные формы, а в третьем методе использовалось ViewChild. В зависимости от требований и предпочтений вашего проекта вы можете выбрать наиболее подходящий метод.

При выборе метода не забывайте учитывать такие факторы, как сложность формы, масштабируемость и удобство обслуживания. Реализуя любой из этих методов, вы можете улучшить взаимодействие с пользователем и упростить выбор флажков в своих приложениях Angular.