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

Boote

the attribute is: disabled – Discover

are you trying to disable a single option or all of them? – Overcharge

@Overcharge 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. – Raquelraquela

@bryan60, just one of them – Boote

Answer 1

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

Overcharge

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

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

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. – Gallard

[attr.disabled] did not work for me using angular 5.2.0 – Dipterocarpaceous

@golfNintyNine definitely works up to current version – Overcharge

This reference 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. – Outbrave

This does not working with PrimeNG – Aruba

Answer 2

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]="".

Biddy

reactive form doesn't like [disable] on the attributes – Boote

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. – Biddy

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

agree with the comment above @Overcharge – Boote

Answer 3

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

Chasseur