Angular实现表格每行单选按钮互斥的方案咨询

问题根源 #

你当前的代码有两个核心问题导致单选互斥效果失效：

• 同一行的所有单选按钮value值完全一致，就算选中不同选项，表单也无法区分选中状态；
• 硬写radio0到radio4的控件名太死板，要是skills数组长度变了，表单结构就不匹配了，也不符合Angular表单的最佳写法。

修复后的代码实现 #

1. TypeScript 部分（重构表单结构） #

用FormArray动态生成和skills数组对应的表单控件，每个技能项对应一个控件，用来存该行选中的单选值：

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

// 组件类内部代码
feedbackForm: FormGroup;

constructor(private fb: FormBuilder) {}

ngOnInit(): void {
  // 根据skills的长度动态创建表单控件数组
  const skillControlList = this.skills.map(() => this.fb.control(''));
  this.feedbackForm = this.fb.group({
    skillRatings: this.fb.array(skillControlList)
  });
}

// 给模板用的快捷方法，方便获取FormArray
get skillRatings(): FormArray {
  return this.feedbackForm.get('skillRatings') as FormArray;
}

submitData() {
  console.log(this.feedbackForm.value);
  // 这里写你的提交逻辑
}

2. HTML 模板部分（修正单选绑定） #

删掉没用的*ngIf="i==i"，给同一行的单选按钮绑定同一个FormArray控件，并且给每个单选设置不一样的value（比如用1-5代表不同等级）：

<form [formGroup]="feedbackForm" (ngSubmit)="submitData()">
  <table class="res-tbl">
    <tbody>
      <tr class="skill-tr" *ngFor="let skill of skills; let i = index;">
        <td class="table-data res-td skill-td">
          <b>{{skill.skillName}}</b>
        </td>
        <td>
          <input type="radio" [formControl]="skillRatings.at(i)" value="1">
        </td>
        <td>
          <input type="radio" [formControl]="skillRatings.at(i)" value="2">
        </td>
        <td>
          <input type="radio" [formControl]="skillRatings.at(i)" value="3">
        </td>
        <td>
          <input type="radio" [formControl]="skillRatings.at(i)" value="4">
        </td>
        <td>
          <input type="radio" [formControl]="skillRatings.at(i)" value="5">
        </td>
      </tr>
    </tbody>
  </table>
  <button type="submit">Submit</button>
</form>

核心逻辑说明 #

• 同一行的单选按钮绑定同一个FormArray控件，这样就能保证每行内只能选中一个；
• 每个单选按钮设置唯一的value，表单才能正确记录你选中的是哪一个选项；
• 用FormArray动态生成控件，不管skills数组有多少项，表单都能自动适配，不用手动改控件名。

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