Angular多复选框[checked]绑定失效咨询：opt.checked为true却未选中

我想咨询为何这些多复选框的[checked]双向绑定失效——尽管opt.checked的值为true，复选框却未被选中。若将ngFor替换为formControl可正常显示，但使用Angular动态表单时将无法完成校验。

问题核心原因 #

你遇到的问题本质是**[formControlName]与[checked]的状态控制权冲突**：

• Angular响应式表单的FormControl会完全接管表单元素的状态（包括选中状态），手动设置的[checked]会被FormControl的内置状态覆盖，所以即便opt.checked=true，复选框也不会按照该值选中。
• 单个复选框绑定FormControl时，FormControl的值是布尔类型，和[checked]的布尔值匹配，所以看起来正常，但这种方式无法支持多复选框的批量值收集与校验。

解决方案 #

1. 调整FormControl初始值（组件类中） #

多复选框对应的FormControl应存储选中项的key数组，初始化时从question.options中筛选出checked=true的选项key作为初始值：

// 假设动态表单构建逻辑如下
this.form = this.fb.group({
  // 其他表单控件...
  [question.key]: new FormControl(
    // 初始化：收集已勾选选项的key
    question.options.filter(opt => opt.checked).map(opt => opt.key),
    // 这里添加你的校验规则，比如必填、自定义校验等
    Validators.required
  )
});

2. 修改模板代码 #

移除[checked]绑定，让FormControl自动控制选中状态；保留[value]为opt.key，确保选中时对应key能被加入FormControl的数组：

<div style="display: table-caption" [id]="question.key" *ngSwitchCase="'checkbox'">
  <div *ngFor="let opt of question.options; let i = index" style="display: flex; flex-direction: column;">
    <mat-checkbox 
      [formControlName]="question.key"
      style="padding-bottom: 12px;"
      (change)="syncOptionChecked(opt, $event.checked)"
      [value]="opt.key"
      [name]="opt.key"
    >{{opt.value}}</mat-checkbox>
  </div>
</div>

3. 同步更新opt.checked（可选） #

如果需要保持opt.checked与表单状态同步，可在组件类中添加同步方法：

syncOptionChecked(opt: any, isChecked: boolean) {
  // 直接修改对象属性（若触发变更检测有问题，改用不可变更新）
  opt.checked = isChecked;
  
  // 不可变更新方式（确保变更检测触发）
  // const updatedQuestions = this.questions.map(q => {
  //   if (q.key === question.key) {
  //     return {
  //       ...q,
  //       options: q.options.map(o => o.key === opt.key ? {...o, checked: isChecked} : o)
  //     };
  //   }
  //   return q;
  // });
  // this.questions = updatedQuestions;
}

方案优势 #

• 多复选框的FormControl以数组存储选中项key，mat-checkbox会自动根据key是否在数组中判断选中状态，完美适配响应式表单的状态管理。
• 保留formControlName后，动态表单的校验规则完全生效，满足你的校验需求。

内容的提问来源于stack exchange，提问作者Kossam Lennon Kafesu