CODEWITHSUNDEEP
typescriptcheckboxangular8angular-reactive-forms
Pratik
Pratik

Reputation: 17

If one checkbox is checked,check And disable other checkbox Angular

When key1 checkbox is checked, I want to check and disable key2 checkbox

HTMLcode

<input class="form-check-input" type="checkbox" formControlName="key1" id="key1" (click)="key1Click()">
            <label for="key1" class="form-check-label">Key 1</label>
            <input class="form-check-input" formControlName="key2" type="checkbox" id="key2">
            <label for="key2" class="form-check-label">Key 2</label>

Typescript code for checkbox

keyClick() {

let x = <HTMLInputElement>document.getElementById("key1");
let y = <HTMLInputElement>document.getElementById("key2");
if (x.checked) {
  y.checked = true;
  y.disabled = true;
}
else {
  y.checked = false;
  y.disabled = false;
}

}

By using this code key2 checkbox is checked and disabled. But the boolean value of key2 checkbox remains false. Any suggestions on how can I change the boolean value of key2 checkbox to true when I click key1 checkbox I am using Angular 8 and its reactive forms module.I am new to angular.

Upvotes: 0

Views: 3991

Answers (1)

Abhishek Tewari
Abhishek Tewari

Reputation: 425

You could subscribe to the valueChanges observable of the first checkbox,i.e., key1.

Demo snippet:

this.formName.get("key1").valueChanges.subscribe(val=>{
    if(val)
    //enable the second checkbox
    else 
    //disable the second checkbox
});

where formName is the name of your reactive form. Also don't forget to unsubscribe to this observable on component destroy.

Upvotes: 0

Related Questions