Angular响应式表单：如何控制复选框的选中状态

你的问题核心是同时使用formControlName和[checked]导致状态冲突——Angular响应式表单中，formControlName会优先接管控件的状态（包括复选框的选中状态），手动设置的[checked]会被表单模型覆盖，所以才会出现复选框始终选中的异常。

要实现“选中时控件值为'Man'，未选中为'Woman'”的需求，有两种简洁的实现方式：

方式一：手动绑定状态（无formControlName） #

直接去掉formControlName，手动维护复选框状态和表单控件值的同步，完全避免冲突：

模板代码 #

<input class="form-check-input" type="checkbox"
       [id]="field.key"
       [checked]="formControl.value === 'Man'"
       (change)="onCheckChange($event)">

组件代码 #

onCheckChange($event: Event) {
  const isChecked = ($event.target as HTMLInputElement).checked;
  const targetValue = isChecked ? 'Man' : 'Woman';
  this.formControl.setValue(targetValue);
}

这种方式逻辑直观：用[checked]根据表单控件的值判断是否选中，change事件触发时根据复选框状态更新控件值，完全由你掌控状态同步。

方式二：保留响应式绑定（自定义值映射） #

如果想继续使用formControlName，可以通过ngModel做值转换，同时避免绑定冲突：

模板代码 #

<input class="form-check-input" type="checkbox"
       [id]="field.key"
       [formControlName]="field.key"
       [ngModel]="formControl.value === 'Man'"
       (ngModelChange)="onCheckChange($event)"
       [ngModelOptions]="{standalone: true}">

组件代码 #

onCheckChange(isChecked: boolean) {
  const targetValue = isChecked ? 'Man' : 'Woman';
  this.formControl.patchValue(targetValue);
}

这里[ngModelOptions]="{standalone: true}"是关键，它让ngModel和formControlName的绑定互不干扰：ngModel负责控制复选框的选中状态，ngModelChange触发值更新，最终同步到表单控件。

不管用哪种方式，核心都是避免formControlName和[checked]的直接冲突，确保状态同步逻辑唯一。

内容的提问来源于stack exchange，提问作者Kaloyan Stamatov