Двустороннее связывание данных для чекбокса в Angular 2: как правильно сделать?

Решение: правильное использование `ngModel` с чекбоксом

Проблема в вашем коде — не хватает импорта FormsModule в корневой модуль приложения. Ошибка "No value accessor" возникает именно из-за этого. Давайте разберём пошагово, как правильно настроить двустороннее связывание.

Шаг 1: Импорт FormsModule

Убедитесь, что в файле app.module.ts (или вашем модуле) импортирован FormsModule из @angular/forms:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // <-- этот импорт обязателен

import { AppComponent } from './app.component';
import { MyComponent } from './my-component/my-component.component';

@NgModule({
  declarations: [
    AppComponent,
    MyComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // <-- добавьте сюда
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Шаг 2: Исправленный компонент

Ваш код компонента почти правильный, но рекомендую использовать [(ngModel)] с атрибутом name — это обязательно для работы в форме. Вот рабочий пример:

// my-component.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <label>
      <input 
        type="checkbox" 
        [(ngModel)]="isChecked" 
        name="agreement" 
      />
      Согласен с условиями
    </label>
    <p>Статус: {{ isChecked }}</p>
    <button (click)="resetCheckbox()">Сбросить</button>
  `
})
export class MyComponent {
  isChecked: boolean = false;

  resetCheckbox(): void {
    this.isChecked = false;
  }
}

Шаг 3: Альтернативный подход без ngModel

Если вы не хотите использовать ngModel (например, для простых случаев), можно реализовать двустороннюю привязку вручную через свойства [checked] и событие (change):

// my-component.component.ts (альтернатива)
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <label>
      <input 
        type="checkbox" 
        [checked]="isChecked" 
        (change)="onCheckboxChange($event)" 
      />
      Согласен с условиями
    </label>
    <p>Статус: {{ isChecked }}</p>
  `
})
export class MyComponent {
  isChecked: boolean = false;

  onCheckboxChange(event: any): void {
    this.isChecked = event.target.checked;
  }
}

Почему это работает?

• Синтаксис [(ngModel)] — это "банановая в клетку" (banana-in-a-box) нотация, которая объединяет привязку свойства [ngModel] и обработчик события (ngModelChange).
• Атрибут name — обязателен при использовании ngModel внутри <form> или без него, чтобы Angular мог корректно отслеживать элемент.
• Ручная привязка — даёт полный контроль, но требует больше кода. Полезна, если нужно добавить дополнительную логику при изменении.

Важные замечания:

• Убедитесь, что FormsModule импортирован именно в том модуле, где объявлен ваш компонент.
• Если используете реактивные формы (ReactiveFormsModule), то подход будет другим — через formControl.
• Для группировки нескольких чекбоксов лучше использовать массив и ngModel с привязкой к индексу.

После добавления FormsModule ваш исходный код заработает. Попробуйте — и чекбокс начнёт правильно синхронизироваться с isChecked!

// app.module.ts
import { ReactiveFormsModule } from '@angular/forms';
// ... добавьте в imports: ReactiveFormsModule

// my-component.component.ts
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  template: `
    <label>
      <input type="checkbox" [formControl]="agreeControl" />
      Согласен
    </label>
    <p>Значение: {{ agreeControl.value }}</p>
    <button (click)="agreeControl.setValue(false)">Сбросить</button>
  `
})
export class MyComponent {
  agreeControl = new FormControl(false);
}