CODEWITHSUNDEEP
formsangularradio-button
Travis Parks
Travis Parks

Reputation: 8695

Angular 5 - Disabling Radio Buttons

I have a radio button group in Angular 5. I want to disable some options, using the [disabled] attribute. However, I am noticing only the first radio button actually gets disabled. See my plunker: http://plnkr.co/edit/JzFmvjUyvhPdTkbYT1YZ?p=preview

Even if I hard code [disabled]="true", it still doesn't disable the second radio button. I don't want to switch to using a <select>, so I am curious if there is another way to get this to work with radio buttons.

Upvotes: 18

Views: 64273

Answers (10)

CHETAN SHARMA
CHETAN SHARMA

Reputation: 1

[attr.disabled]

it basically works on two basis

  1. When we use [attr.disabled]="null", in this case, it will enable radio
  2. When we use [attr.disabled]="true", in this case it will disable radio

Upvotes: 0

Nikki
Nikki

Reputation: 1

If you want to disable a specific radio button of angular material which is in a loop, you can do this based on specific condition. This can be done like this, using the disabled attribute of the radio group:

In HTML:

<mat-radio-group>
    <mat-radio-button value="1" 
        [disabled]="name === 'welcome' ? false : true" 
        *ngFor="let name of names;">
        {{ name }}
    </mat-radio-button>
</mat-radio-group>

In .ts file:

public names = [
    'welcome',
    'computer',
    'keyboard'
]

Upvotes: 0

Abhishek Gautam
Abhishek Gautam

Reputation: 1767

Use this : (for reactive form approach)

 <input
    type="radio"
    id="primaryIPV6"
    value="2"
    [attr.disabled]="flagValue ? '' : null"
    formControlName="p_ip_type"
    (change)="optionalFn()">

Set flagValue programmatically from .ts class:

use -> null : false (null would be interpreted as false ) use -> true/'' : true (true or simply blank would be interpreted as true)

Upvotes: 8

Muhammad Awais
Muhammad Awais

Reputation: 4492

I was working with ionic and the following works for me.

<ion-radio class="fix-radio_button" *ngIf="!IsSuspended" color="default" [disabled]="q.QuestionOptionId==q.AnswerId" [checked]="q.QuestionOptionId==q.AnswerId"></ion-radio>

Upvotes: 1

Yatharth Varshney
Yatharth Varshney

Reputation: 2103

There can be 2 solutions for this :-

1. Using the disabled attribute ([attr.disabled])

One solution to this problem can be using the disabled attribute ([attr.disabled]) instead of the disabled property ([disabled]), but [attr.disabled] works slightly differently, to enable the radio button you need to pass null to [attr.disabled] and any non-null value to disable it. Consider the below example :-

<input type="radio" name="enabled" [attr.disabled]="null" />Enabled1
<input type="radio" name="enabled" [attr.disabled]="null" />Enabled2

<input type="radio" name="disabled" [attr.disabled]="false" />Disabled1
<input type="radio" name="disabled" [attr.disabled]="false" />Disabled2

In this example the set of radio buttons named "enabled" will be enabled since for them [attr.disabled] is set to null, whereas the set of radio buttons named "disabled" will be disabled despite the [attr.disabled] being set to "false" this is because false is a non-null value.

2. Using fieldset tag

Another even better solution for this problem is using the <fieldset> tag for grouping the radio buttons together and then setting the [disabled] property on that <fieldset> tag instead of individual radio buttons. Below is an example for the same :-

<fieldset [disabled]=true>
    <input type="radio" name="test" />yes
    <input type="radio" name="test" />no
</fieldset>

Upvotes: 42

Vasim Hayat
Vasim Hayat

Reputation: 929

Here is your updated running code and punker..

Update Plunker 

@Component({
  selector: 'my-app',
  template: `
    <form>
      Hello {{name}}!!!
      <input type="checkbox" name="dus" [(ngModel)]="isDisabled">
      <input type="radio" name="answer" value="Yes" [(ngModel)]="name" [disabled]="isDisabled" /> Yes
      <input type="radio" name="answer" value="NO" [(ngModel)]="name"  [disabled]="isDisabled" /> No
    </form>
  `,
})
export class App {
  name = 'Yes';;
  isDisabled = true;
}

Upvotes: 0

Travis Parks
Travis Parks

Reputation: 8695

I ended up cheating. Instead of using the same name for both radio buttons, I gave each radio button a unique name and bound them to the same backing field. http://plnkr.co/edit/zNbODcAqZMgjXfluxhW6?p=preview

@Component({
  selector: 'my-app',
  template: `
    <form>
      Hello {{name}}!!!
      <input type="radio" name="answer1" value="Yes" [(ngModel)]="name" [disabled]="isDisabled1()" /> Yes
      <input type="radio" name="answer2" value="No" [(ngModel)]="name"  [disabled]="isDisabled2()" /> No
    </form>
  `,
})
export class App {
  name:string;
  isDisabled1(): boolean {
    return false;
  },
  isDisabled2(): boolean {
    return false;
  }
}

Since they are both bound to the same backing field, they end up being mutually exclusive, behaving the way radio buttons should. It also allows them to be independently disabled.

In my real-world scenario, I actually only did one-way binding with (click) events to set the bound value, but it's the same trick.

Upvotes: 1

Mohamed Gara
Mohamed Gara

Reputation: 2935

One way to deal with the problem is to place the disabled binding on the last radio button in the group. Here is a modified version of your code: http://plnkr.co/edit/v6S5G7Do5NAMKzZvNdcd?p=preview

<input type="radio" name="answer" value="Yes" [(ngModel)]="name" /> Yes
<input type="radio" name="answer" value="No" [(ngModel)]="name" [disabled]="isDisabled()" /> No

There is a bug and a design problem in disabling (using [disabled]) Angular template driven radio buttons.

I fixed the bug in this pull request: https://github.com/angular/angular/pull/20310

The design problem is that we put the [disabled] binding on a single radio button, but it's all the group that is affected by the data binding. Here is a modified version of your code that illustrate the problem: http://plnkr.co/edit/3yRCSPsdjXqhUuU9QEnc?p=preview

Upvotes: 6

Ankit Kapoor
Ankit Kapoor

Reputation: 1754

Considering DrNio answer you should use attr.disabled and set value as [value]="'Yes'". This is because assigning as "Yes" makes angular to evaluate it as an expression instead of just a value.So your input element would be :

<input type="radio" name="answer" [value]="'Yes'" [(ngModel)]="name"   [attr.disabled]="isDisabled()"  />

Upvotes: 0

DrNio
DrNio

Reputation: 1976

It works fine like this [attr.disabled]="isDisabledState === true"

And in the component class you can have isDisabledState: boolean = true

Upvotes: 6

Related Questions