如何在Angular中通过函数禁用Mat Radio单选按钮？

你之前通过Renderer修改原生DOM disabled属性的方案不生效，是因为Angular Material的mat-radio-button组件的禁用状态由自身封装的@Input() disabled属性控制，直接修改原生DOM属性不会同步到组件内部状态，因此无法触发展示和交互的禁用效果。

方案1：直接操作MatRadio组件实例 #

如果你已经通过视图查询获取了目标单选按钮的组件实例，直接修改实例的disabled属性即可：

// 视图查询时直接获取MatRadioButton组件实例，而非原生DOM元素
@ViewChild('targetRadio', {read: MatRadioButton}) targetRadio: MatRadioButton;

// 禁用逻辑
disableTargetRadio() {
  this.targetRadio.disabled = true;
  // 启用的话赋值为false即可
}

如果需要批量控制多个单选按钮，可使用@ViewChildren：

@ViewChildren(MatRadioButton) allRadios: QueryList<MatRadioButton>;

// 禁用指定索引的单选按钮
disableRadioByIndex(index: number) {
  const radio = this.allRadios.toArray()[index];
  radio && (radio.disabled = true);
}

方案2：模板属性绑定（Angular推荐写法） #

更符合Angular数据流规范的方式是直接在模板中绑定disabled属性到组件变量，修改变量即可自动更新状态：
模板代码：

<mat-radio-group formControlName="gender">
  <mat-radio-button value="male" [disabled]="disableMale">男</mat-radio-button>
  <mat-radio-button value="female" [disabled]="disableFemale">女</mat-radio-button>
</mat-radio-group>

组件逻辑：

disableMale = false;
disableFemale = false;

// 调用该方法即可禁用「男」选项
toggleMaleDisable() {
  this.disableMale = true;
}

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