时间戳

首页 > 解决方案 > 如果其他控件没有值，如何使复选框保持禁用状态，如果控件在 angular8 中有值则启用

javascript - 如果其他控件没有值，如何使复选框保持禁用状态，如果控件在 angular8 中有值则启用

问题描述

我有一个复选框字段，如果另一个控件有值，我想在其中启用复选框。这里我有 2 个控件amount and update received。如果 update Received 控件中有值，则必须允许用户在金额字段中进行签入/签出。如果更新请求控件为空/null，则金额复选框必须保持禁用状态，并且不应允许用户签入/签出。

演示： 演示

TS：

initEoForm() {
    this.eoInfoForm = this.FB.group({
      amount: ['', Validators.required],
      updateRequested:['']
    });
  }  


  public disableUpdate() {
    let disabled = true;
      if (this.eoInfoForm.value.updateRequested) {
        disabled = false;
        return false;
      }
    return disabled;
  }

HTML：

<form  [formGroup]="eoInfoForm">
  <div class="row">
    <div class="col">
       <div class="custom-control custom-switch">
         {{disableUpdate()}}
                <input type="checkbox" class="custom-control-input" id="noNewBusiness"
                    formControlName="amount"  disabled="disableUpdate()">
                <label class="custom-control-label" for="noNewBusiness">Update Received</label>
            </div>
    </div>
  </div>
</form>

为了查看我在 html 中得到的是真值还是假值，我尝试检查 value {{disableUpdate()}}。它相应地给出真值或假值，但即使我得到真我也无法签入/签出。

标签： javascriptangularangular-reactive-forms

解决方案

我稍微调整了一下，但我做到了。你需要 setAttribute() 和 removeAttribute()。我喜欢避免 if 块，我更喜欢三元运算符。

typing(event){
    let checkBox = document.getElementById('noNewBusiness')
    event.target.value == '' ? checkBox.setAttribute('disabled', 'true') : checkBox.removeAttribute('disabled')
  }

堆栈闪电战

推荐阅读