本文聚焦在在 Angular 中如何正确绑定单选按钮并处理布尔值，避免常见陷阱与误区？以下内容将从基础绑定、响应式表单实现，以及常见错误分析三大维度展开，帮助开发者提升表单交互的可靠性与可维护性。
基础绑定：模板驱动的单选按钮与布尔值
基本写法与要点
在模板驱动表单中，使用 [(ngModel)] 绑定变量时，单选按钮组必须共享相同的 name 属性以形成一个组。 若出现不同的 name，Angular 会把每个单选按钮视作独立的控件，导致绑定失效。
为确保布尔值类型正确，不要把布尔值写成字符串，应使用布尔字面量，即使用 [value]="true" 和 [value]="false" 而非 value="true" 或 value="false"。
<label><input type="radio" name="featureEnabled" [(ngModel)]="featureEnabled" [value]="true">启用
</label>
<label><input type="radio" name="featureEnabled" [(ngModel)]="featureEnabled" [value]="false">禁用
</label>
在组件中，确保初始值类型是布尔值，如 featureEnabled: boolean = true;，否则初始渲染可能出现未选中状态或类型不一致的问题。
模板驱动示例：完整代码
该示例展示了如何在模板驱动表单中绑定一个布尔值的单选按钮组，以及如何在 UI 中直观反映当前状态。
export class SettingsComponent {featureEnabled: boolean = true;
}
<form><label><input type="radio" name="featureEnabled" [(ngModel)]="featureEnabled" [value]="true">启用</label><label><input type="radio" name="featureEnabled" [(ngModel)]="featureEnabled" [value]="false">禁用</label>
</form>
要点回顾：统一 name、使用布尔字面量、初始化布尔类型，可以避免字符串化导致的比较错误。
常见错误与排查方式
常见错误1：忘记统一 name，导致分组失败，检查是否所有单选按钮的 name 属性一致。
错误示例：<input type="radio" [value]="true" [(ngModel)]="flag"> 与另一个按钮没有相同的 name。
<input type="radio" name="group1" [value]="true" [(ngModel)]="flag"> Yes
<input type="radio" name="group2" [value]="false" [(ngModel)]="flag"> No
常见错误2：写成字符串值，导致布尔类型错位，应始终使用布尔字面量。
<input type="radio" name="enable" [value]="true" [(ngModel)]="enabled">
<input type="radio" name="enable" [value]="false" [(ngModel)]="enabled">
常见错误3：初始值非布尔类型，应在组件初始化时确保为布尔值，避免给 UI 带来错乱。
响应式表单：单选按钮的 FormGroup 与 FormControl
使用 FormGroup 的实现要点
在响应式表单中，通过 FormGroup 和 FormControlName 绑定单选按钮组，可以获得更强的表单控制和校验能力。
为布尔型单选按钮设置值时，建议使用布尔字面量作为 [value] 值，与模板驱动保持一致，以免类型错位。
import { FormBuilder, FormGroup } from '@angular/forms';export class SettingsReactive {form: FormGroup;constructor(private fb: FormBuilder) {this.form = this.fb.group({approval: [false] // 初始值为布尔});}
}
<form [formGroup]="form"><label><input type="radio" formControlName="approval" [value]="true">同意</label><label><input type="radio" formControlName="approval" [value]="false">不同意</label>
</form>
通过表单状态，可以直接读取到布尔值，如 this.form.get('approval')?.value 将返回 true/false，便于后续提交与校验。
模板驱动与响应式的对比要点
对比两种绑定模式，响应式表单在复杂场景下更易维护，尤其是在跨组件传值、动态表单字段时。 模板驱动更简洁，适合简单场景，但在类型控制与复杂校验方面略逊于响应式表单。
<input type="radio" name="mode" [(ngModel)]="mode" [value]="true">
<input type="radio" name="mode" [(ngModel)]="mode" [value]="false">
// 响应式要点示例
this.form = this.fb.group({ mode: [true] });
常见陷阱与误区分析
布尔值的字符串化陷阱
最常见的问题是将布尔值通过字符串传递，例如 value="true" 或 value="false"，这会把模型的值变为字符串，而非布尔值。 这将导致条件判断与布尔逻辑失效。
解决方法是使用布尔字面量，在模板中使用 [value]="true" 和 [value]="false"，并在组件中定义明确的布尔类型变量。
<input type="radio" [value]="true" [(ngModel)]="flag">
<input type="radio" [value]="false" [(ngModel)]="flag">
要点总结：避免字符串化、保持布尔类型一致性、并在初始化阶段明确类型。
同组单选的 name 属性设置不当
如果同组按钮的 name 属性不同，用户点击某一个并不会自动选中其他同组的按钮，导致 UI 与模型不同步。
请确保同一单选组的所有按钮拥有一致的 name，如 name="choices"。此外，响应式表单中不再依赖真实 DOM 的 name，而是通过 FormControlName 进行分组控制。
<label><input type="radio" name="choices" [value]="true" [(ngModel)]="option">选项 A
</label>
<label><input type="radio" name="choices" [value]="false" [(ngModel)]="option">选项 B
</label>
响应式表单的对比，请使用 formControlName 绑定单选组，而非仅靠 HTML 的 name。
异步数据加载时的初始化问题
当单选组的初始值来自异步数据源时，务必确保在数据加载完成后再设置布尔值，以避免初始渲染阶段的错误状态影响后续交互。
建议在数据就绪后再对对应控件赋值，必要时使用默认的布尔值作为初始值，随后再覆盖为接口返回的布尔值。
// 假设从 API 获取默认选项
this.service.getDefaultOption().subscribe(res => {// 确保 res 是布尔值且在界面可控this.formGroup.patchValue({ approval: !!res });
});
要点回放：在绑定单选按钮时，始终优先确保布尔类型的一致性、正确的分组名称，以及对异步数据的稳健初始化，以避免运行时代码路径的分支错误。
