Angular中如何校验动态生成的Checkbox列表至少有一项被选中

API 探路者

2026-10-2

实现Angular动态复选框至少选中一个校验的最简方案

具体实现步骤

第一步：处理数据源，新增选中状态字段
拿到服务返回的recipients数据时，给每个项新增isChecked属性存储选中状态，默认和你原有逻辑一致设为true即可：

// 假设从服务获取数据的回调逻辑
this.userService.getRecipients().subscribe(res => {
  this.recipients = res.map(recipient => ({
    ...recipient,
    isChecked: true // 不需要默认选中就设为false
  }))
})

第二步：修改模板，用双向绑定关联选中状态
把复选框的[checked]替换为[(ngModel)]双向绑定到每个项的isChecked属性，注意循环生成的复选框name要唯一避免冲突：

<tr *ngFor="let recipient of recipients">
  <td class="disable edit">
    <div>
      <span class = "textbluesmall">
        <input 
          type="checkbox" 
          [(ngModel)]="recipient.isChecked" 
          [value]="recipient?.participantId" 
          name="participant_{{recipient?.participantId}}" 
        />
        {{recipient?.lastName }} ,{{recipient?.firstName }}
      </span>
    </div>
  </td>
  <td class="disable edit">
    <div>
      <span>{{recipient?.email }}</span>
    </div>
  </td>
</tr>

注意：使用ngModel需要确保当前组件所在的模块已经导入了FormsModule

第三步：直接用数组方法做校验
校验逻辑不需要操作DOM，直接遍历数据源判断有没有选中项即可：
```
validateChecked(): boolean {
  // 只要有一个项isChecked为true就返回true，否则返回false
  return this.recipients.some(item => item.isChecked)
}
```
提交表单前调用该方法，如果返回false直接提示「请至少选择一个参与者」即可。