无法禁用单选按钮答案

【问题标题】：Cannot disable radio button无法禁用单选按钮
【发布时间】：2021-07-14 11:43:43
【问题描述】：

我正在使用 Angular 11。我想禁用有条件的单选按钮，但它不起作用。它总是使事件满足条件。我不知道如何解决它。这是我的示例代码。

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>

【问题讨论】：

相信这个答案可以解决问题，stackoverflow.com/a/50130989/4217907
谢谢哥们.. 你拯救了我的一天

标签： angular typescript radio-button

【解决方案1】：

要禁用响应式表单控件，您应该根据字段的表单控件名称在 ts 文件中执行此操作。

以下是 Angular 团队禁用响应式表单控件的推荐方法。

在初始化期间禁用

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

在某个条件下禁用

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

您可以参考 Angular 团队提供的以下文档。 https://angular.io/api/forms/FormControl

如果您使用模板属性 () 禁用该字段，那么您可以在控制台中看到一条警告，按照上面给出的方式进行操作。

【讨论】：

【解决方案2】：

我已经测试并发现 [disabled] 不适用于单选输入按钮。您应该尝试 [hidden] 属性，使其不会显示给用户。

【讨论】：