IONIC 5：ion-checkbox的ngModel双向绑定功能失效问题

API 探路者

2026-9-30

问题根因与解决方案

ion-checkbox双向绑定失效基本都是模块导入缺失或者绑定写法不匹配Ionic版本导致的，按以下步骤排查修复即可：

第一步：确认当前组件所属模块已导入FormsModule
要使用[(ngModel)]双向绑定语法，必须在对应NgModule中导入Angular表单模块，示例如下：

// 你的模块文件，比如app.module.ts或investigation.module.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // 必须导入这行
import { InvestigationComponent } from './investigation.component';

@NgModule({
  declarations: [InvestigationComponent],
  imports: [
    // 其他导入比如CommonModule、IonicModule等
    FormsModule // 必须加入到imports数组
  ]
})
export class InvestigationModule { }

第二步：调整HTML模板绑定写法
Ionic原生表单组件已内置对ngModel的支持，不需要额外添加ngDefaultControl属性，删除该属性即可，修正后的模板代码：
```
<ion-list>
  <ion-item >
    <ion-label>IOPA</ion-label>
    <ion-checkbox slot="start" [(ngModel)]="iopa"> 
    </ion-checkbox>
  </ion-item>
</ion-list>
```
可选兜底方案：显式绑定替代ngModel
如果上述调整后仍有问题，可以用IonicCheckbox原生的checked属性和ionChange事件实现完全可控的双向绑定，无需依赖ngModel：
```
<ion-list>
  <ion-item >
    <ion-label>IOPA</ion-label>
    <ion-checkbox slot="start" [checked]="iopa" (ionChange)="iopa = $event.detail.checked; onIOPAChange()"> 
    </ion-checkbox>
  </ion-item>
</ion-list>
```
这种写法兼容性更好，同时可以直接触发自定义的change回调逻辑。