Angular复选框ngModel已弃用，正确替代方案是什么？

响应式表单方案（官方推荐） #

这是Angular当前主推的表单处理方式，完美适配Angular Material组件的状态管理逻辑：

1. 组件类中初始化FormControl：

import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 初始值设为false，对应未选中状态
  checkboxControl = new FormControl(false);
}

2. 模板中绑定到MatCheckbox：

<mat-checkbox [formControl]="checkboxControl">
  自定义选项文本
</mat-checkbox>

3. 操作选中状态：

• 获取当前状态：this.checkboxControl.value
• 设置状态：this.checkboxControl.setValue(true)（或patchValue）

模板驱动表单方案（兼容双向绑定） #

如果习惯模板驱动的写法，确保模块导入依赖后可继续使用双向绑定：

1. 模块中导入必要依赖：

import { FormsModule } from '@angular/forms';
import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
  imports: [
    // ...其他模块
    FormsModule,
    MatCheckboxModule
  ]
})
export class YourModule { }

2. 组件类定义状态变量：

export class YourComponent {
  isChecked = false;
}

3. 模板中使用双向绑定：

<mat-checkbox [(ngModel)]="isChecked">
  自定义选项文本
</mat-checkbox>

注：[(ngModel)]并未完全弃用，弃用提示通常出现在响应式表单中混用ngModel的场景，此时应改用响应式方案。

为什么[checked]无效？ #

[checked]是单向绑定，仅能设置初始状态，无法同步用户点击后的状态变化到组件变量，也不会响应组件变量的更新。Angular Material的复选框状态由内部表单控制逻辑管理，单向绑定无法介入这个闭环。

应急手动同步方案（不推荐） #

如果临时需要手动控制，可配合change事件同步状态：

import { MatCheckboxChange } from '@angular/material/checkbox';

export class YourComponent {
  isChecked = false;

  handleCheckboxChange(event: MatCheckboxChange) {
    this.isChecked = event.checked;
  }
}

<mat-checkbox [checked]="isChecked" (change)="handleCheckboxChange($event)">
  自定义选项文本
</mat-checkbox>

内容的提问来源于stack exchange，提问作者Dean Hiller