Angular表单值无法关联单选按钮选中状态问题排查

你的核心问题出在手动绑定checked属性与Angular Reactive Forms的自动状态管理冲突，同时value的类型不匹配导致选中状态无法正确同步。

问题拆解 #

1. 重复状态控制：当使用formControlName时，Angular会自动负责表单控件的值与DOM选中状态的同步。你手动添加的[checked]会干扰这个机制，导致状态不一致。
2. 值类型不匹配：原生radio的value属性默认是字符串类型，而你的FormControl存储的是布尔值（true/false）。当你写value="false"时，实际传递的是字符串"false"，和FormControl中的布尔值false无法匹配，所以即使表单值正确，radio也不会被选中。
3. 自定义组件干扰：你提到设置固定[checked]="true"也不生效，大概率是自定义的zh-radio组件内部对input的选中状态做了封装或覆盖，忽略了原生的checked属性。

修复步骤 #

1. 移除手动绑定的[checked]

完全交给Angular Reactive Forms管理选中状态，删除所有[checked]绑定。

2. 正确绑定布尔类型的value

使用方括号绑定[value]为布尔值，确保和FormControl中的值类型一致：

修改后的模板代码：

<div class="radio-group">
  <zh-radio [smallRadio]="true" >
    <input type="radio" name="riskGroupPoster" formControlName="riskGroupPoster" [value]="true"/>
    <label>ja</label>
  </zh-radio>
  <zh-radio [smallRadio]="true">
    <input type="radio" name="riskGroupPoster" formControlName="riskGroupPoster" [value]="false"/>
    <label>nein</label>
  </zh-radio>
</div>

3. 确保FormControl初始值正确

在组件类中，初始化FormGroup时要给riskGroupPoster设置正确的布尔初始值（比如从本地存储或服务中读取之前保存的值）：

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

// 组件类内
form = new FormGroup({
  riskGroupPoster: new FormControl(false) // 这里设置初始值，或替换为你保存的用户选择
});

额外说明 #

你之前尝试[value]="true"时出现值变成"on"的问题，可能是自定义zh-radio组件内部对input的value做了错误处理。可以检查组件代码，确保它正确传递了input的value属性，或者直接使用原生radio测试，排除组件干扰。

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