Angular中如何单独禁用mat-radio-group内的单个mat-radio-button

mat-radio-group 作为单选组是单个独立表单控件，组内的mat-radio-button只是该控件的不同取值选项，不需要给单个单选按钮单独绑定formControlName。你之前调用disable方法不生效，是因为noNotice、notice90本身就不是你表单组内的有效独立控件，调用自然不会生效。

通过给mat-radio-button绑定[disabled]属性实现单独控制禁用状态：

1. 修改HTML模板 #

• 去掉单选按钮上多余的formControlName，给整个mat-radio-group绑定一个表单控件
• 给需要控制禁用状态的单选按钮绑定[disabled]属性，关联组件内的变量

<mat-radio-group
        ngDefaultControl
        autocapitalize="off"
        aria-autocomplete="off"
        text-center
        formControlName="noticeType" <!-- 整个单选组绑定一个表单控件即可 -->
    >
        <mat-radio-button
            id="BW_input_NOTICE90"
            value="NOTICE90"
            color="primary"
            [disabled]="isNotice90Disabled"
        >
            90 Days
        </mat-radio-button>
        <mat-radio-button
            id="BW_input_NONOTICE"
            value="NONOTICE"
            color="primary"
            [disabled]="isNoNoticeDisabled"
        >
            No Notice
        </mat-radio-button>
</mat-radio-group>

2. 在TS组件中控制状态 #

直接修改绑定的变量值即可动态切换禁用状态：

// 组件类中定义状态变量
isNotice90Disabled = false;
isNoNoticeDisabled = false;

// 示例：切换No Notice选项的禁用状态
switchNoNoticeStatus() {
  this.isNoNoticeDisabled = !this.isNoNoticeDisabled;
}

如果禁用逻辑和其他表单控件的取值关联，可以直接在[disabled]中写判断逻辑，不需要额外定义变量：

<mat-radio-button
    value="NONOTICE"
    color="primary"
    [disabled]="form.get('otherField').value === '特定值'"
>
    No Notice
</mat-radio-button>

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