Angular FormArray嵌套FormGroup时PrimeNG单选按钮全组选中问题排查

问题根因 #

这个问题是单选按钮的name属性重复导致的。
不管是原生HTML单选框还是PrimeNG的p-radioButton组件，都是通过相同的name属性来判定是否属于同一个互斥组：只要name属性一致，就会被归为同一组，选中组内任意一个按钮，同组其他按钮都会自动取消选中。
你在循环渲染每个权限分组时，所有分组下的permission1单选框的name都硬编码成了permission1，permission2、permission3同理，页面上所有同name的单选框都被判定为同一个互斥组，自然会出现点击一个全部分组同步选中的问题。
普通输入控件没有互斥逻辑，name属性不会影响值绑定，所以之前用普通表单控件时没有触发问题。

修复方案 #

只需要把当前循环的索引i拼到name属性中，保证每个分组的单选框name全局唯一即可，修改示例如下：

<p-radioButton (onClick)="logRadio($event, setting)" [name]="'permission1-' + i"
  formControlName="permission1" [value]="0">
</p-radioButton>

其余permission2、permission3对应的单选框也按同样规则修改，给name加上当前循环的索引后缀即可。
修改后每个分组的单选框name都是唯一的，互斥逻辑只会在当前分组内生效，不会再出现跨分组同步选中的问题。

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