如何在 Angular 中正确隔离多组单选按钮（Radio Buttons）

Angular 中多个单选按钮组相互影响的根本原因在于缺少 name 属性——即使使用了独立的 FormControl 实例，HTML 仍按 name 归组；缺失 name 会导致所有 <input type="radio"> 被浏览器视为同一逻辑组，从而产生跨组联动。

Angular 中多个单选按钮组相互影响的根本原因在于缺少 name 属性——即使使用了独立的 FormControl 实例，HTML 仍按 name 归组；缺失 name 会导致所有 <input type="radio"> 被浏览器视为同一逻辑组，从而产生跨组联动。

在 HTML 规范中，单选按钮（<input type="radio">）的行为由 name 属性定义分组边界：同名的 radio 按钮构成一个互斥组，仅允许选中其中一个。Angular 的 FormControl 负责数据绑定与状态管理，但它无法覆盖原生 DOM 的分组逻辑。因此，即使你为两组按钮分别创建了 formControl 和 formControl2，若未显式设置 name，浏览器会将所有 radio 元素归入默认匿名组，导致点击任意按钮都会取消另一组中同值（如 true）按钮的选中状态——视觉上“联动”，而 formControl2.value 可能意外变为 null，因为其绑定的控件并未真正接收到有效变更。

✅ 正确做法是：为每组 radio 按钮分配唯一且一致的 name 值，同时保持 FormControl 独立绑定：

<!-- 第一组：绑定 formControl，name="group1" --><div><input id="foo" type="radio" [formControl]="formControl" name="group1" [value]="true"><label for="foo">foo</label><input id="bar" type="radio" [formControl]="formControl" name="group1" [value]="false"><label for="bar">bar</label></div><!-- 第二组：绑定 formControl2，name="group2" --><div><input id="foox" type="radio" [formControl]="formControl2" name="group2" [value]="true"><label for="foox">foox</label><input id="barx" type="radio" [formControl]="formControl2" name="group2" [value]="false"><label for="barx">barx</label></div>

注意事项：

1. name 属性必须存在且组内一致，仅靠 id、for 或 FormControl 实例隔离无效；
2. name 值无需与变量名或 FormControl 名称关联，但需保证组间唯一；
3. 若使用 FormGroup + formControlName，Angular 会自动处理 name（推荐用于复杂表单），但手动绑定 FormControl 时必须显式声明；
4. 避免动态生成重复 name（如循环渲染时硬编码相同 name），否则仍会意外合并分组。

总结：单选按钮的互斥行为由 HTML 原生机制驱动，FormControl 仅同步状态而非定义分组。始终为每组 radio 显式指定语义清晰、唯一且稳定的 name 属性，这是实现多组独立控制的必要前提。