Cannot disable radio button

Question

I'm using angular 11. I want to disable radio button with condition but it not working. It always enable event meet the condition. I don't have any idea how to solve it. This my example code.

HTML

<div class="wizard mt-5">
              <div class="wizard-inner">
                <ul class="border-0 justify-content-between nav nav-tabs">
                  <div class="connecting-line"></div>
                  <li class="active text-left">
                    <a>
                     
                      <!-- {{vehicleInformation?.marketValue}} -->
                      <input type="radio" class="btn-check step-check-box" name="agreedValueFlag" formControlName="agreedValueFlag"
                        value="MV" [disabled]="vehicleInformation?.marketValue <= 0">
                      <img class="position-relative" src="assets/img/icons/wizard-inactive.png" alt="icon">
            
                      <span class="first-span">RM{{vehicleInformation?.marketValue}}</span>
                      <span class="first-span " style="margin-top: 52px;">{{'vehicle_info_4' | translate}}</span>
            
            
            
                    </a>
                  </li>
                 
                  <!-- {{vehicleInformation?.minMarktetValue}} -->
                  <li>
                    <a>
                      <input type="radio" class="btn-check step-check-box" name="agreedValueFlag" formControlName="agreedValueFlag"
                        value="MIN" [disabled]="vehicleInformation?.marketValue <= 0">
                      <img class="position-relative" src="assets/img/icons/wizard-active.png" alt="icon">
                      <span class="second-span">RM{{vehicleInformation?.minMarktetValue}}</span>
                      <span class="first-span " style="margin-top: 52px;">{{'vehicle_info_5' | translate}}</span>
                    </a>
                  </li>
                  
                  <li class=" text-right">
                    <a>
                      <!-- class="btn-check step-check-box" -->
                      <!-- -{{vehicleInformation?.maxMarketValue}} -->
                      <input type="radio" class="btn-check step-check-box" name="agreedValueFlag" formControlName="agreedValueFlag"
                        value="MAX" [disabled]="vehicleInformation?.maxMarketValue <= 0">
                      <img class="position-relative" src="assets/img/icons/wizard-inactive.png" alt="icon">
                      <span class="third-span">RM{{vehicleInformation?.maxMarketValue}}</span>
                      <span class="first-span " style="margin-top: 52px;">{{'vehicle_info_6' | translate}}</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>

Believe this answer solves the issue, https://stackoverflow.com/a/50130989/4217907 — Simplicity's_Strength, Apr 20 '21 at 09:37

SaiSurya · Answer 1 · 2021-04-20T10:10:19.263

To disable a Reactive form control you should do it in the ts file based on the formcontrolname of the field.

Here are the recommended ways of disabling a reactive form control by the angular team.

Disable during initialization

form = new FormGroup({
  first: new FormControl({value: '', disabled: true}, Validators.required),
});

Disable in a condition

this.form .controls.first.disable(); // To disable
this.form .controls.first.enable(); // To Enable

You can refer the following documentation given by the angular team. https://angular.io/api/forms/FormControl

If you use template attribute (<input [attr.disabled]="true" />) to disable the field then you can see a warning in the console to follow the way given above.

score 1 · Answer 2 · answered Apr 20 '21 at 10:02

1

I have tested and found [disabled] does not work for radio input button. You should try [hidden] property so its not displayed to the user.

answered Apr 20 '21 at 10:02

shailesh kanbi

39
4

Cannot disable radio button

2 Answers2