Angular响应式表单：如何获取单选按钮选中值并设置布尔状态

我明白你的需求啦——只要选中Choice 1或者Choice 2，就把selectedValue设为true，没选中的时候保持false，但现在没法成功设置成true，咱们来一步步搞定这个问题～

问题根源分析 #

大概率是你模板里的单选按钮value绑定出了问题：如果直接写value="true"，Angular会把它当成字符串"true"，而不是布尔值true，这就导致selectedValue（你定义的布尔类型）没法正确匹配，自然没法设置成预期的布尔值true。

解决方案一：绑定布尔值到单选按钮 #

直接用方括号[value]绑定布尔值true，这样选中时ngModel会正确把selectedValue设为布尔值true：

模板代码修改

<!-- 同一组单选按钮要共用同一个name属性 -->
<input type="radio" name="choiceGroup" [(ngModel)]="selectedValue" [value]="true"> Choice 1
<input type="radio" name="choiceGroup" [(ngModel)]="selectedValue" [value]="true"> Choice 2

<!-- 可选：如果需要支持“取消选中”的状态，可以加一个隐藏的单选按钮绑定false -->
<input type="radio" name="choiceGroup" [(ngModel)]="selectedValue" [value]="false" hidden>

组件代码

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 初始化默认值为false
  selectedValue: boolean = false;

  // 可以加个方法测试值是否正确
  checkValue() {
    console.log('当前selectedValue:', this.selectedValue);
  }
}

解决方案二：用change事件直接赋值 #

如果不想用ngModel的双向绑定，也可以通过(change)事件直接给selectedValue赋值，逻辑更直观：

模板代码

<input type="radio" name="choiceGroup" (change)="selectedValue = true"> Choice 1
<input type="radio" name="choiceGroup" (change)="selectedValue = true"> Choice 2

<!-- 可选：添加一个“None”选项来重置为false -->
<input type="radio" name="choiceGroup" (change)="selectedValue = false"> None

组件代码和上面一样，初始化selectedValue: boolean = false即可。

测试验证 #

你可以加个按钮触发checkValue()方法，或者直接在模板里显示selectedValue的值，比如：

<p>当前选中状态：{{ selectedValue }}</p>
<button (click)="checkValue()">查看控制台值</button>

这样就能直观看到选中Choice 1或2时，selectedValue是否变成true啦～

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