Angular独立FormControl实例下单选按钮互相影响问题排查求助

问题原因 #

你遇到的问题核心是原生HTML单选按钮的分组规则被忽略了。

虽然你给每组绑定了独立的FormControl，也设置了唯一的id和for，但原生单选按钮是靠name属性来划分互斥组的——同一组的单选按钮必须共享相同的name值，浏览器才会识别它们是互斥的，点击其中一个时只会选中本组内的选项。

你的代码里完全没设置name属性，浏览器就会把所有单选按钮当成一个隐含的大组处理。当不同组里的单选按钮value值相同时（比如两组都有value="true"的选项），点击其中一个，浏览器会自动选中所有同value的单选按钮，这就出现了跨组选中的诡异现象。

修复方案 #

给每组的单选按钮添加相同的name属性，不同组的name要区分开：

修改后的模板代码如下：

<div>
  <input id="foo" type="radio" name="group1" [formControl]="formControl" [value]="true">
  <label for="foo">foo</label>
  <input id="bar" type="radio" name="group1" [formControl]="formControl" [value]="false">
  <label for="bar">bar</label>
</div>

<div>
  <input id="foox" type="radio" name="group2" [formControl]="formControl2" [value]="true">
  <label for="foox">foox</label>
  <input id="barx" type="radio" name="group2" [formControl]="formControl2" [value]="false">
  <label for="barx">barx</label>
</div>

这样设置后，浏览器会正确识别两组互斥的单选按钮，Angular的FormControl也能正常独立控制每组的选中状态，跨组选中的问题就解决了。

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