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