Angular表单中如何获取单选按钮组的选中值？

你的问题出在单选按钮组的表单控件绑定方式上，以下是修正步骤：

1. 修正HTML中的单选按钮绑定 #

将formControlName="broj"从父级div移到每个<input type="radio">元素上，同时为Bootstrap按钮添加动态激活类，确保选中状态可视化：

<div class="col">
  <div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-warning" [class.active]="eKotlarnica.get('broj')?.value === 'Једна лопата'">
      <input type="radio" name="broj" formControlName="broj" value="Једна лопата">
      <img src="/assets/images/1 lopata.png" alt="Option 1" width="50" height="50">
    </label>
    <label class="btn btn-warning" [class.active]="eKotlarnica.get('broj')?.value === 'Две лопате'">
      <input type="radio" name="broj" formControlName="broj" value="Две лопате">
      <img src="/assets/images/2 lopate.png" alt="Option 2" width="50" height="50">
    </label>
  </div>
</div>

关键说明： #

• Angular响应式表单要求formControlName必须直接绑定到表单控件元素（这里就是radio输入框），父容器无法识别该属性。
• [class.active]指令用来同步Bootstrap按钮的选中状态，当控件值等于当前选项的value时，自动添加active类。

2. 可选：为表单添加验证（优化） #

如果需要确保用户必须选择一个选项，可以在组件的表单初始化中添加验证器：

eKotlarnica = this.formBuilder.group({
  lozac: ['', Validators.required],
  broj: ['', Validators.required], // 添加必填验证
  vreme: ['', Validators.required],
})

3. 测试提交功能 #

修改完成后，点击提交按钮，onSubmit()方法中的this.eKotlarnica.value就能正确包含broj字段的选中值了。

内容的提问来源于stack exchange，提问作者Nemanja Terzić