Angular中如何单独禁用FormControl组内的单个单选按钮？

你的问题根源在于把同一个FormControl实例绑定到了每一个单选按钮上，这就导致当你修改这个FormControl的disabled状态时，所有关联它的按钮都会被禁用。另外直接写disable=true无效，是因为Angular中属性绑定需要用方括号[]来绑定表达式，而且要确保自定义的<radiobutton>组件支持disabled输入属性。

下面是具体的解决方案：

步骤1：修正FormControl的绑定方式 #

对于单选按钮组，正确的做法是让整个按钮组关联一个FormControl，而不是每个按钮单独绑定。这样组内的按钮共享同一个值控制，但可以单独设置各自的禁用状态。

修改你的HTML代码：

<form [formGroup]="myForm">
  <radiobutton-group formControlName="food">
    Food:
    <radiobutton value="apple"></radiobutton>
    <radiobutton value="pear" [disabled]="true"></radiobutton> <!-- 单独禁用这个按钮 -->
    <radiobutton value="orange"></radiobutton>
  </radiobutton-group>
</form>

步骤2：调整TypeScript代码 #

移除FormControl初始化时的disabled配置（因为我们不再需要禁用整个组）：

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

@Component({
  templateUrl: './radio-button-food.component.html'
})
export class RadioButtonFoodComponent {
  myForm = new FormGroup({
    food: new FormControl('apple'), // 仅设置初始值，不设置全局禁用
    drink: new FormControl('coke'),
  });
}

额外注意事项 #

1. 确认自定义组件的输入属性：如果你的<radiobutton>是自定义组件，要确保它的输入属性确实是disabled。有些组件可能用isDisabled这类命名，这时需要改成[isDisabled]="true"。
2. 动态禁用场景：如果需要根据业务逻辑动态控制禁用状态，可以在TS中定义一个变量，然后绑定到按钮上：

   // TS文件中
   isPearDisabled = true; // 可以根据业务逻辑修改这个值
   

   <!-- HTML文件中 -->
   <radiobutton value="pear" [disabled]="isPearDisabled"></radiobutton>
   

这样就能精准地禁用单个单选按钮，而不会影响整个按钮组的可用性。

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