Search code examples
javascriptangularangular-forms

radio button's disabled property is not working inside the reactive form

Radio button's disabled property is not working inside the reactive form but it's working fine when I put radio button outside the reactive form.

I have a condition like if my current status is CLOSED I should allow the user to edit radio button inside the reactive form I already tried with Disabled property of radio button but no luck

component.ts

conducttestlm:any={
    isReadOnly:false
}
this.condutTestLM=this.formBuilder.group({
    "testStatus":['',Validators.required],
})
if(success.data.status=='CLOSED'){
    this.conducttestlm.isReadOnly=true;
}

component.html

<form [formGroup]="condutTestLM">
    <div class="row radio-top">
        <div class="col-md-6 p-l-15">
            <label class="radio-box">
                <input formControlName="testStatus" name="testStatus" [(ngModel)]="conducttestlm.teststatus" [disabled]="conducttestlm.isReadOnly" value="Pass" type="radio">
                <span class="checkmark"></span>
                <span class="font-style">Pass</span>
            </label>
        </div>
        <div class="col-md-6 p-l-15">
            <label class="radio-box">
                <input formControlName="testStatus" name="testStatus" [(ngModel)]="conducttestlm.teststatus"  [disabled]="conducttestlm.isReadOnly" value="Fail" type="radio">
                <span class="checkmark"></span>
                <span class="font-style">Fail</span>
            </label>
        </div>
    </div>
</form >

I need to disable the radio button

Solution

  • Don't use template driven approach while using reactive forms. Have your code like:

    <form [formGroup]="condutTestLM">
  <div class="row radio-top">
      <div class="col-md-6 p-l-15">
        <label class="radio-box">
          <input formControlName="testStatus" name="testStatus" [attr.disabled]="conducttestlm.isReadOnly ? true : null" value="Pass" type="radio">
          <span class="checkmark"></span>
          <span class="font-style">Pass</span>
        </label>
      </div>
      <div class="col-md-6 p-l-15">
        <label class="radio-box">
          <input formControlName="testStatus" name="testStatus" [attr.disabled]="conducttestlm.isReadOnly ? true: null" value="Fail" type="radio">
          <span class="checkmark"></span>
          <span class="font-style">Fail</span>
        </label>
      </div>
    </div>
</form>

    See an example here: https://stackblitz.com/edit/angular-dncxac?file=src%2Fapp%2Fapp.component.html

    You will notice that I have used attr.disabled instead of disabled to disable individual radio buttons. To know the difference between attr.disabled and disabled, you can have a look at this link. In a gist, attr.disabled is an HTML attribute while disabled is a DOM property. There are some HTML attributes for which DOM properties don't exist, as shown in the added link.

    From angular docs

    Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).

    • A few HTML attributes have 1:1 mapping to properties. id is one example.
    • Some HTML attributes don't have corresponding properties. colspan is one example.
    • Some DOM properties don't have corresponding attributes. textContent is one example.
    • Many HTML attributes appear to map to properties ... but not in the way you might think!

    This is not true for input boxes and disabled DOM property. There indeed is a disabled DOM property but there is some issue while using it individually over radio buttons. See this Github issue. The solution I provided is more of a workaround to achieve individual disabling of radio buttons.