Angular中ng-zorro Radio组件失效及值处理问题求助

问题根源 #

1. 点击标签区域无法选中：原生radio需要与<label>标签关联（通过for属性绑定input的id）才能实现点击文本触发选中，你之前用<div>包裹供应商名称，无法触发radio的选中事件。
2. 未选中时提交空数组：原生radio在未设置默认选中且用户未操作时，表单控件值可能因绑定逻辑异常变为空数组，需通过表单初始化或提交前处理确保返回空字符串。

Ng-Zorro Radio组件实现方案 #

直接改用Ng-Zorro的nz-radio-group和nz-radio组件，既能解决上述两个问题，又能简化表单绑定逻辑：

修改后的HTML代码 #

<tr *ngFor="let sdata of suppliers | async; let i = index">
  <td>
    <div class="d-flex gap-3">
      <!-- 使用nz-radio-group统一管理单选组，绑定formControlName -->
      <nz-radio-group formControlName="supplier">
        <nz-radio [nzValue]="sdata.supplier_id">
          {{ sdata?.name }}
        </nz-radio>
      </nz-radio-group>
    </div>
  </td>
  <td>
    <button class="spbutton" (click)="updateSuppliers(sdata)" nz-button nzType="default" nzShape="round" (mousedown)="$event.stopPropagation()">
      <span class="iconSize"><i class="flaticon-editing"></i></span>
    </button>
  </td>
</tr>

修改后的TS代码 #

initializeSupplierForm(): void {
  this.supplierForm = this.formBuilder.group({
    // 初始值设为空字符串，确保未选中时返回''而非空数组
    supplier: new FormControl('', { nonNullable: true }),
  });

  this.setSupplierFormData();
}

setSupplierFormData(): void {
  // 仅当loadedProduct有值时才更新表单
  if (this.loadedProduct?.supplier) {
    this.supplierForm.patchValue({
      supplier: this.loadedProduct.supplier,
    });
  }
}

// 移除不必要的onRadioChange，nz-radio-group会自动同步formControl值
// 若需监听选中变化，可改用valueChanges：
// this.supplierForm.get('supplier')?.valueChanges.subscribe(selectedId => {
//   this.selectedSuppliers = selectedId;
// });

getFormData(): any {
  const formData = { ...this.supplierForm.value };
  // 确保未选中时返回空字符串（因初始值已设为''，此步骤可省略，但若需兼容异常情况可保留）
  formData.supplier = formData.supplier ?? '';
  return formData;
}

关键修改说明 #

• 解决点击标签触发选中：nz-radio组件内部已自动关联文本与单选框，点击供应商名称即可触发选中，无需手动绑定label。
• 解决未选中返回空数组：表单初始化时将supplier控件的初始值设为空字符串（配合nonNullable: true避免值变为null），提交时确保字段值始终为字符串类型，不会出现空数组。
• 简化逻辑：移除了手动设置[checked]和(change)事件，nz-radio-group会自动与formControl同步选中状态，减少冗余代码。

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