Components: mat-radio-button disable don't work

Created on 24 Oct 2018  路  4Comments  路  Source: angular/components

Bug, feature request, or proposal:

BUG

What is the expected behavior?

When set the attribute "disable" this to be disabled and is ok.

What is the current behavior?

The (click) event works whit the radio disabled

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-cydwd3

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.1.0, Material 6.4.2 and 7.0.1, Typescript 2.7.2, All browsers

Most helpful comment

The '_click_' event shouldn't fire on a disabled input only if we're talking about native input elements.

Since <mat-radio-button> is not a native input element, when you set the click listener on it you're actually listening for a click on <mat-radio-button> itself, which is doable and there's nothing that can be done to prevent the 'click' event from firing _from inside_.

Therefore, you should use the '_change_' event to listen for a value change, or you could fire the desired function only if the input isn't disabled:

(click)="!isDisabled && onClick()"

All 4 comments

The '_click_' event shouldn't fire on a disabled input only if we're talking about native input elements.

Since <mat-radio-button> is not a native input element, when you set the click listener on it you're actually listening for a click on <mat-radio-button> itself, which is doable and there's nothing that can be done to prevent the 'click' event from firing _from inside_.

Therefore, you should use the '_change_' event to listen for a value change, or you could fire the desired function only if the input isn't disabled:

(click)="!isDisabled && onClick()"

@UserGalileo is correct. Another workaround can be to set pointer-events: none on the disabled radio buttons. Closing since there isn't much we can do about it.

@UserGalileo is correct. Another workaround can be to set pointer-events: none on the disabled radio buttons. Closing since there isn't much we can do about it.

Ok is closed. For me to be set one property when passing a boolean value and disable the radio. How the attribute.

Thanke you boys @UserGalileo @crisbeto

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

Was this page helpful?
0 / 5 - 0 ratings