Angular响应式表单中如何获取单选按钮的布尔值？

核心问题：单选按钮组未正确绑定表单控件 #

你当前将[formControl]="attendee"绑定到了每个<mat-radio-button>上，这会导致控件状态管理混乱。正确的做法是把表单控件绑定到<mat-radio-group>上，由组统一管理选中项：

修改HTML中的单选按钮区域：

<p>Assistiràs?</p>
<mat-radio-group aria-label="attendee" [formControl]="attendee">
   <mat-radio-button [value]="true">Sí</mat-radio-button>
   <mat-radio-button [value]="false">No</mat-radio-button>
</mat-radio-group>

确保值类型匹配 #

你已经使用[value]绑定布尔值，这能保证值类型不会变成字符串。如果不想默认选中任何选项，可以调整UserDTO的初始值，并同步表单控件：

// 调整UserDTO初始化，将attendee设为null
this.user = new UserDTO('', '', '', 2, null);
// 表单控件初始值同步，同时保留必填校验
this.attendee = new FormControl(this.user.attendee, [Validators.required]);

正确获取单选按钮的值 #

在提交方法registerAttendee()中，通过以下两种方式获取选中值：

registerAttendee() {
  // 方式1：通过表单组获取完整表单值
  const formData = this.attendeeForm.value;
  console.log('是否参加:', formData.attendee); // 得到布尔值true/false

  // 方式2：直接访问单个控件的值
  const attendeeStatus = this.attendee.value;
  console.log('是否参加:', attendeeStatus);
}

额外修复：提交按钮语法错误 #

你的提交按钮代码存在引号未闭合的问题，修改为：

<button type="submit" mat-raised-button color="primary" [disabled]="!attendeeForm.valid">
   Enviar 
</button>

内容的提问来源于stack exchange，提问作者A.Baes