CODEWITHSUNDEEP
javascriptangularangular-reactive-forms
Bhrungarajni
Bhrungarajni

Reputation: 2545

How to make checkbox remain disabled if other control doesnt have value and enable if control has value in angular8

i have a checkbox fiels, where in i want to enable checkbox if the other control has value. here i have 2 controls amount and update received. If update Received control has value in it, then user must be allowed to make checkin/checkout in the amount field. If update requested control is empty/null then the amount checkbox must remain disabled and shouldnt allow user to checkin/checkout.

DEMO: DEMO

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>

In order to see whether i get true or false value in html, i tried to check value {{disableUpdate()}}. It is giving true or false values accordingly but even though i get true i am not able to checkin/checkout.

Upvotes: 0

Views: 199

Answers (1)

CaneRandagio
CaneRandagio

Reputation: 378

I tweaked it a little bit but I did it. You need setAttribute () and removeAttribute (). I like to avoid if blocks, I prefer the ternary operator.

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

stackblitz

Upvotes: 1

Related Questions