如何在Angular中按条件禁用mat-radio-group内的指定单选按钮

Angular Material 中mat-radio-group的disabled属性优先级高于子级mat-radio-button的禁用属性，会强制禁用组内所有按钮，所以要实现单独禁用指定按钮，按以下步骤修改即可：

修改步骤 #

• 移除mat-radio-group标签上的[disabled]="isEditing && dealData !== null"全局禁用配置
• 给值为Sale的两个mat-radio-button（包括ngIf分支和ng-template内的按钮）都添加动态禁用绑定，禁用条件按你的业务需求设置即可，比如沿用原来的编辑态判断逻辑就绑定[disabled]="isEditing && dealData !== null"

调整后代码示例 #

<mat-radio-group (change)="onChangeDispositionType($event)" [(ngModel)]="dealDispositionFormFields.dealDispositionType">
  <div class="deal-form-header-labels">What type of idle disposition deal would you like to submit? (*)</div>
  <div class="flex" style="justify-content: space-between;">
    <div class="deal-form-btn-group w-30per" [ngClass]="{'v-bg-color':dealDispositionFormFields.dealDispositionType === 'Buyout'}">
      <div class="deal-form-btn-group-radio">
        <mat-radio-button
          *ngIf="dealDispositionFormFields.dealDispositionType === 'Buyout' else Buyout"    
          color="accent"  
          [value]="'Buyout'">
          <span class="alter-text-color">Buyout</span>
        </mat-radio-button>
        <ng-template #Buyout>
          <mat-radio-button
            [value]="'Buyout'">
            Buyout
          </mat-radio-button>
        </ng-template>
      </div>
    </div>
    <div  class="deal-form-btn-group w-30per" [ngClass]="{'v-bg-color':dealDispositionFormFields.dealDispositionType === 'Sale'}">
      <div class="deal-form-btn-group-radio">
        <mat-radio-button
          [disabled]="isEditing && dealData !== null"
          *ngIf="dealDispositionFormFields.dealDispositionType === 'Sale' else Sale"    
          color="accent"
          [value]="'Sale'">
         <span class="alter-text-color">Sale</span>
        </mat-radio-button>
        <ng-template #Sale>
          <mat-radio-button
            [disabled]="isEditing && dealData !== null"
            [value]="'Sale'">
            Sale
          </mat-radio-button>
        </ng-template>
      </div>
    </div> 
    <div class="deal-form-btn-group w-30per" [ngClass]="{'v-bg-color':dealDispositionFormFields.dealDispositionType === 'Sublease'}">
      <div class="deal-form-btn-group-radio">
        <mat-radio-button
        *ngIf="dealDispositionFormFields.dealDispositionType === 'Sublease' else Sublease"    
          color="accent"
          [value]="'Sublease'">
         <span class="alter-text-color">Sublease</span>
        </mat-radio-button>
        <ng-template #Sublease>
          <mat-radio-button
            [value]="'Sublease'">
            Sublease
          </mat-radio-button>
        </ng-template>
      </div>
    </div> 
  </div>
</mat-radio-group>

可选优化 #

你当前为了实现选中状态修改文字颜色写了两套mat-radio-button逻辑，代码冗余度较高，可以直接给文字span绑定动态class简化：

<mat-radio-button color="accent" [value]="'Sale'" [disabled]="isEditing && dealData !== null">
  <span [ngClass]="{'alter-text-color': dealDispositionFormFields.dealDispositionType === 'Sale'}">Sale</span>
</mat-radio-button>

这样就不需要写ngIf和ng-template的分支逻辑了，三个单选按钮都可以按这个方式简化。

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