禁用单个垫单选按钮答案

【问题标题】：Disable individual mat-radio-button禁用单个垫单选按钮
【发布时间】：2021-12-05 07:55:32
【问题描述】：

我有两个单选按钮，我需要添加一些规则来禁用单选按钮。因此，可以启用一个按钮，而禁用另一个按钮。但我不知道如何只禁用 mat-radio-group 中的一个单选按钮。

HTML 代码：

<mat-radio-group
        ngDefaultControl
        autocapitalize="off"
        aria-autocomplete="off"
        text-center
    >
        <mat-radio-button
            id="BW_input_NOTICE90"
            value="NOTICE90"
            color="primary"
            formControlName="notice90"
        >
            90 Days
        </mat-radio-button>
        <mat-radio-button
            id="BW_input_NONOTICE"
            value="NONOTICE"
            color="primary"
            formControlName="noNotice"
        >
            No Notice
        </mat-radio-button>
    </mat-radio-group>

在 .ts 组件中，我尝试过 this.form.controls.noNotice.disable(); 和 this.form.get('noNotice').disable();，但这些都不起作用。如何禁用组件中的单选按钮？

【问题讨论】：

我认为formControlName 应该在mat-radio-group 标签上。您可以在mat-radio-button 标签上添加[disabled] = isDisabled
@oz1985oz 我确实尝试过，但那样会禁用所有单选按钮。我只想禁用组中的一个单选按钮
这能回答你的问题吗？ Disable a radio button conditionally in a radio button group inside Reactive form in Angular 4
@YongShun 我已经尝试使用[attr.disabled]，就像建议的链接一样，但这不起作用。似乎唯一有效的是使用[disabled]，但由于这是一种反应形式，我认为您不应该在模板中应用禁用属性（该链接提到）。这就是为什么我试图从 .ts 组件中做到这一点
@oz1985oz 不建议在响应式表单上使用 [disabled] 属性

标签： angular typescript radio-button disable

【解决方案1】：

您可以在单个<mat-radio-button> 上设置[disabled] 属性

<mat-radio-group aria-label="Select an option" (change)="onChange()">
  <mat-radio-button [disabled]="isDisabled" value="1">Option 1</mat-radio-button>
  <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

您可以从组件本身更改isDisabled

【讨论】：