Связь checkbox и boolean в Angular 5: ngModel и ngIf

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

Чтобы связать состояние чекбокса с булевой переменной в Angular, используйте двустороннее связывание данных с помощью [(ngModel)]. Такой подход позволяет связать элемент формы с переменной в компоненте и отслеживать изменение его состояния.

<input type="checkbox" [(ngModel)]="isChecked" />

Обязательно инициализируйте переменную isChecked как булевую в TypeScript-коде вашего компонента:

isChecked: boolean = true; // Теперь она будет синхронизоваться с чекбоксом

Профессиональное изучение чекбоксов

Ознакомились с [(ngModel)]? Отлично! Давайте разберём другие возможности:

Связываем свойства и атрибуты

В Angular [checked]="item.checked" создаёт прямую связь между свойством элемента DOM и свойством модели:

<input type="checkbox" [checked]="item.checked" (change)="item.checked = !item.checked" />

То есть, теперь ваш объект данных может контролировать состояние чекбокса и наоборот.

Подробнее об этом расскажет наш спикер на видео

Реактивные формы на практике

Реактивные формы обеспечивают более гибкое управление состояниями форм:

this.form = this.fb.group({
  acceptTerms: [false, Validators.requiredTrue]
});

<input type="checkbox" formControlName="acceptTerms" />

Validators.requiredTrue обязует пользователя активировать чекбокс перед отправкой формы.

Создание персонализированного чекбокса

При создании пользовательского чекбокса, для его интеграции в формы Angular, реализуйте интерфейс ControlValueAccessor:

@Component({
  selector: 'app-custom-checkbox',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomCheckboxComponent),
      multi: true
    }
  ],
  template: `
    <input type="checkbox" (change)="onChange($event.target.checked)" [checked]="checked">
  `
})
export class CustomCheckboxComponent implements ControlValueAccessor {
  checked = false;
  onChange: (_: any) => void = (_: any) => {};

  writeValue(val: any): void {
    this.checked = val;
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {}
}

В данном случае ControlValueAccessor обеспечивает правильное передавание значения и обработку изменений для чекбокса.

Использование множества чекбоксов

При помощи директивы ngFor можно создать группу чекбоксов:

<div *ngFor="let option of options; let i = index">
  <input type="checkbox" [checked]="option.selected" (change)="options[i].selected = !options[i].selected">
  {{ option.name }}
</div>

Каждый из чекбоксов будет привязан к соответствующему объекту в массиве options.

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

Модель мышления "включено-выключено" поможет лучше понять работу чекбоксов в Angular:

<input type="checkbox" [(ngModel)]="lightOn" />

Состояние чекбокса можно отобразить так:

Выключатель света | 💡 = True (включено) Выключатель света | 🌑 = False (выключено)

С каждым действием со светом-и-темнотой чекбокса его булево значение изменяется:

• Если свет включен 💡, значение будет true.
• Если свет выключен 🌑, значение становится false.

В контексте Angular: 💡 ? [Да] : 🌑 ? [Нет]

Профессиональные рекомендации и кодинговые нюансы

Секреты профессионалов и правила написания кода на Angular помогут избегать ошибок и сделать ваш код лучше:

Осторожно, литералы

Использование строковых литералов типа checked="true" считается дурным тоном. Вместо них используйте привязку к свойствам компонента.

Синхронизация состояний

При обработке события change обязательно синхронизируйте значение чекбокса с моделью:

<input type="checkbox" [checked]="item.selected" (change)="itemToggle(item)">

itemToggle(item: any) {
  item.selected = !item.selected; // Переключаем состояние, как фокусник монету 🎩
  // Здесь могут быть дополнительные действия...
}

Главное – событийная архитектура

Angular основан на событийной архитектуре. Используйте EventEmitter, чтобы отслеживать изменения состояния чекбокса.

Этикет работы с формами

Следуйте лучшим практикам обработки форм в Angular, чтобы упростить валидацию и отправку данных.

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

1. Angular — Официальная документация по NgModel и синтаксису шаблонов — самая актуальная информация о работе с ngModel.
2. MDN: <input type="checkbox"> — подробное руководство по элементу ввода чекбокса в HTML.
3. Angular University о NgModel и двустороннем связывании данных — глубокий анализ работы ngModel в Angular.
4. Boolean checkbox в Angular Reactive Forms — статья о работе с чекбоксами в реактивных формах Angular.
5. DigitalOcean: Работа с различными элементами управления формами в Angular — подробное руководство по использованию разнообразных элементов управления формами в Angular.
6. Управление валидацией с помощью Angular Form Builder — обзор возможностей управления валидацией форм в Angular.
7. YouTube урок: Формы и валидация в Angular 5 — обучающее видео, объясняющее работу с формами и валидацией в Angular 5.