PrimeNG 14中如何将表格复选框正确绑定到表单控件？

问题原因 #

你当前的写法将所有p-tableCheckbox都绑定到同一个categoryIds表单控件，而这个控件默认是普通的FormControl，PrimeNG的复选框会基于该控件的value判断是否选中。当勾选任意一个复选框时，控件值会被设置为当前选中的分类对象，所有复选框都会判断自己的[value]是否等于控件值，导致全部被选中，这是错误的绑定方式。

正确解决方案 #

我们需要利用PrimeNG表格的[(selection)]属性管理选中的分类对象，再将选中对象的ID同步到表单控件中，具体步骤如下：

1. 初始化表单控件 #

将categoryIds初始化为空数组类型的FormControl，用于存储选中的分类ID集合：

ngOnInit(): void {
  this.form = this.fb.group({
    // 其他表单字段...
    categoryIds: this.fb.control([])
  });
}

2. 修改模板中的表格配置 #

移除p-tableCheckbox上的[formControl]绑定，通过表格的onSelectionChange事件同步选中的ID到表单控件：

<form [formGroup]="form" (ngSubmit)="submit()">
  <!-- 其他表单元素 -->
  <p-table #dt 
           [value]="(categories$ | async)!" 
           [(selection)]="selectedCategories"
           dataKey="categoryId"
           (onSelectionChange)="syncCategoryIds()">

    <ng-template pTemplate="header">
      <tr>
        <th>
          <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
        </th>
        <th pSortableColumn="name">
          <div>
            Category
            <p-sortIcon field="name"></p-sortIcon>
            <p-columnFilter type="text" field="name" display="menu"></p-columnFilter>
          </div>
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-category>
      <tr class="p-selectable-row">
        <td>
          <p-tableCheckbox [value]="category"></p-tableCheckbox>
        </td>
        <td>
          <span class="p-column-title">Category</span>
          {{category.name}}
        </td>
      </tr>
    </ng-template>
  </p-table>
  <!-- 提交按钮等 -->
</form>

3. 添加同步方法到组件 #

在组件中定义selectedCategories变量，并实现syncCategoryIds方法，将选中分类的ID提取后设置到表单控件：

selectedCategories: any[] = [];

syncCategoryIds(): void {
  // 提取选中分类的categoryId数组
  const selectedIds = this.selectedCategories.map(category => category.categoryId);
  // 更新表单控件值
  this.form.get('categoryIds')?.setValue(selectedIds);
}

4. 编辑场景的回显处理（可选） #

如果是编辑产品的场景，需要根据已有的分类ID回显选中状态：

// 假设从接口获取了产品已关联的分类ID数组
const existingCategoryIds = [2, 5];

this.categories$.subscribe(categories => {
  // 从分类列表中匹配对应的分类对象，设置到selectedCategories
  this.selectedCategories = categories.filter(cat => existingCategoryIds.includes(cat.categoryId));
  // 同步到表单控件
  this.syncCategoryIds();
});

验证提交 #

提交表单时，form.value.categoryIds会自动包含所有选中的分类ID，直接使用即可：

submit(): void {
  if (this.form.valid) {
    console.log('提交的分类ID:', this.form.value.categoryIds);
    // 后续提交逻辑
  }
}

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