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

Solution 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

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

Comments

[nircraft]

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

[nircraft]

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

[RockGuitarist1]

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.

[bryan60]

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]

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

[nircraft]

agree with the comment above @bryan60

[Tyler Rick]

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.

[anstue]

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

[bryan60]

@golfNintyNine definitely works up to current version

[Egel]

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.