Disable individual mat-radio-button

Question

I have two radio buttons and I need to add some rules for disabling the radio buttons. So one button could be enabled and the other will be disabled. But I cannot figure out how to disable just one radio button in the mat-radio-group.

HTML code:

<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>

In the .ts component I have tried this.form.controls.noNotice.disable(); and this.form.get('noNotice').disable(); but these aren't working. How do you disable a radio button from the component?

I think `formControlName` supposed to be on the `mat-radio-group` tag. You can add `[disabled] = isDisabled` on the `mat-radio-button` tag — oz1985oz, Oct 18 '21 at 09:10
@oz1985oz I did try that to but then that would disable all the radio buttons. I just want to disable one radio button in the group — user123456789, Oct 18 '21 at 09:11
Does this answer your question? [Disable a radio button conditionally in a radio button group inside Reactive form in Angular 4](https://stackoverflow.com/questions/48890608/disable-a-radio-button-conditionally-in-a-radio-button-group-inside-reactive-for) — Yong Shun, Oct 18 '21 at 09:16
@YongShun I have tried using `[attr.disabled]` like that link suggested but that doesn't work. Seems the only thing that does work is using `[disabled]` but since this is a reactive forms I think you are not supposed to apply disable attribute in the template (which that link mentions). Which is why I was trying to do it from the .ts component — user123456789, Oct 18 '21 at 09:29
@oz1985oz it is not recommened to use [disabled] attributes on reactive form — user123456789, Oct 18 '21 at 09:45

score 0 · Answer 1 · answered Oct 18 '21 at 11:42

You can set the [disabled] property on a single <mat-radio-button>

<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>

you can change the isDisabled from the component itself

Disable individual mat-radio-button

1 Answers1