Disable a radio button conditionally in a radio button group inside Reactive form in Angular 4+

Question

I have a reactive form created in component and some formControls defined on it.

Now i need to disable one of the radio button from a radio button group based on some condition.

How do i do it while creating formControl?

PFB the code snippet:

createForm() {
this.heroForm = this.fb.group({
  confirmActionRadioGrp: this.fb.group({
            updateAction: new FormControl({ value: '' })
        })

  });
}

inside my template:

    <div class="form-group confirm-action-radio-container" formGroupName="confirmActionRadioGrp">
<input  type="radio"  class="custom-control-input" value="1" formControlName="updateAction">
    <input  type="radio"  class="custom-control-input" value="2" formControlName="updateAction">
    <input  type="radio"  class="custom-control-input" value="3" formControlName="updateAction"></div>

Now how to disable one of them conditionally? when using [disable] attribute i get some warning in browser console. Angular doesn't encourage doing it

@bryan60 I think it's just one, like you pointed out and me carelessly reading before :P OP speaks of one, but true, it's a bit unclear tho. — AT82, Feb 20 '18 at 18:44

score 11 · Accepted Answer · answered Feb 20 '18 at 18:45

11

Ignore the browser warning and use the disabled attribute on the input. If you'd like you can use :

[attr.disabled]="whatever"

instead which should silence the warning. Angular reactive forms do not currently support disabling individual radio buttons in a group through the formcontrol / formgroup API as per this open issue:

https://github.com/angular/angular/issues/11763

answered Feb 20 '18 at 18:45

bryan60

28,215
4
48
65

I ended up doing [attr.disabled] on the inputs. I was looking for a more elegant way of doing it in some reactive manner while initializing the form. But seeing the long opened issue i guess this is the only way – nircraft Feb 23 '18 at 14:56
The only other option is to use checkboxes and write Some logic to make it behave like a radio field, but this seems like way more effort than using the attr.disabled work around – bryan60 Feb 25 '18 at 13:48
13

Using `[attr.disabled]` worked for me as well. Not sure why this had a downvote. Just be careful that you need to return `null` rather than `false` in order to enable (not disable) the input. – Tyler Rick Jul 23 '18 at 17:10
`[attr.disabled]` did not work for me using angular 5.2.0 – anstue Jan 03 '19 at 07:53
@golfNintyNine definitely works up to current version – bryan60 Jan 03 '19 at 14:46
This [reference](https://stackoverflow.com/a/36745752/1977012) helped me when I wanted to remove `disabled` attribute from rendering when was negative `[attr.disabled]="myBoolVar ? '' : null"` becasue when `disabled="false"` was attached to radio input I could not select it. – Egel Dec 10 '20 at 10:36
This does not working with PrimeNG – java-addict301 Jul 17 '23 at 16:39

RockGuitarist1 · Answer 2 · 2018-02-23T15:21:20.290

3

For Reactive Form controls, you should set disabled either when the form is being made, or later on. This is how you do both:

this.heroForm = this.fb.group({
    updateAction: [{ value: null, disabled: true }]
});

or

this.heroForm.get('updateAction').disable();

Otherwise, if you don't want to disable a Reactive Form control, you will use [disabled]="".

edited Feb 23 '18 at 15:21

answered Feb 20 '18 at 17:51

RockGuitarist1

698
1
7
16

reactive form doesn't like [disable] on the attributes – nircraft Feb 23 '18 at 14:54
1

Edited for the correct way. `[attr.disabled]` is not the right way to do it. You need to create a formControl for each radio, which is how you should be doing it in the first place. That way you can manage each one of them. Unless your radios are generated dynamically. – RockGuitarist1 Feb 23 '18 at 15:22
5

This is not how you’re supposed to make reactive forms for radio button controls. A field of radio buttons is a single form control and won’t behave properly with multiple. There is a long open issue in angular that they don’t support disabling of individual radio buttons, and the recommended work around is using attr.disabled in this case. You can read all of this in the GitHub link I provided – bryan60 Feb 25 '18 at 13:47
agree with the comment above @bryan60 – nircraft Mar 01 '18 at 21:36

score 1 · Answer 3 · answered Dec 08 '20 at 10:48

Embedding the radio button with a fieldset is a further option to disable that particular radio button:

<div class="form-group confirm-action-radio-container" formGroupName="confirmActionRadioGrp">
    <fieldset [disabled]="myDisabledCondition || null">
        <input  type="radio"  class="custom-control-input" value="1" formControlName="updateAction"
    </fieldset>
    <input  type="radio"  class="custom-control-input" value="2" formControlName="updateAction">
    <input  type="radio"  class="custom-control-input" value="3" formControlName="updateAction">
</div>

See also https://stackblitz.com/edit/angular-radio-bug

Disable a radio button conditionally in a radio button group inside Reactive form in Angular 4+

3 Answers3

Linked