如何通过代码设置用作单选按钮的按钮值（Angular响应式表单）

问题核心在于你的按钮没有和表单控件建立正确的绑定关系，导致表单控件值变化后，按钮的选中状态无法同步，反之亦然。以下是修正方案：

1. 修正模板绑定 #

将按钮与表单控件通过formControlName关联，同时设置[value]属性，并通过[class.active]匹配选中状态：

<!-- 选项单选按钮 -->
<button 
  type="button"
  formControlName="radioOption"
  [value]="'optionA'"
  [class.active]="form.get('radioOption')?.value === 'optionA'"
>
  Option A
</button>
<button 
  type="button"
  formControlName="radioOption"
  [value]="'optionB'"
  [class.active]="form.get('radioOption')?.value === 'optionB'"
>
  Option B
</button>

<!-- 食物选择按钮 -->
<button 
  type="button"
  formControlName="selectedFood"
  [value]="'Peach'"
  [class.active]="form.get('selectedFood')?.value === 'Peach'"
>
  Peach
</button>
<button 
  type="button"
  formControlName="selectedFood"
  [value]="'Apple'"
  [class.active]="form.get('selectedFood')?.value === 'Apple'"
>
  Apple
</button>
<!-- 触发设置值的按钮 -->
<button type="button" (click)="setPeachValue()">Set Peach & Option A</button>

2. 简化组件代码 #

组件中的patchValue逻辑本身没问题，可优化初始化代码：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  form!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.form = this.fb.group({
      radioOption: ['optionA'], // 初始选中Option A
      selectedFood: [''] // 初始为空
    });
  }

  setPeachValue() {
    this.form.patchValue({
      selectedFood: 'Peach',
      radioOption: 'optionA'
    });
  }
}

原理说明 #

• 通过formControlName将按钮与表单控件绑定，点击按钮时会自动更新控件值；
• [value]定义按钮对应的控件值，确保表单能识别选中项；
• [class.active]根据当前控件值判断是否添加选中样式，实现视觉同步；
• 调用patchValue时，控件值更新会自动同步到按钮的选中状态。

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