I am attempting to deactivate the checkbox based on the value of other checkboxes. Only one of them can be activated at a time.
When trying to activate one of the checkboxes, I encounter an issue where the subscribed value is being repeated multiple times.
ERROR RangeError: Maximum call stack size exceeded
at SafeSubscriber.__tryOrUnsub (Subscriber.js:191:32)
at SafeSubscriber.next (Subscriber.js:122:22)
at Subscriber._next (Subscriber.js:72:26)
at Subscriber.next (Subscriber.js:49:18)
at EventEmitter_.next (Subject.js:39:25)
at EventEmitter_.emit (core.mjs:22784:15)
at FormControl.disable (forms.mjs:2164:31)
at Object.next (saxo-browser.component.ts:95:52)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183:16)
at SafeSubscriber.next (Subscriber.js:122:22)
I am uncertain about how to resolve this issue. Below is my code,
Component:
private initForm(): void {
this.settingsForm = this.formBuilder.group({
firstValue:[false],
secondValue: [false]
});
this.settingsForm.get('firstValue').valueChanges.subscribe((value) => {
if(value === true) {
this.settingsForm.get('secondValue').disable()
} else {
this.settingsForm.get('secondValue').enable();
}
});
this.settingsForm.get('secondValue').valueChanges.subscribe((value) => {
if(value === true) {
this.settingsForm.get('firstValue').disable()
} else {
this.settingsForm.get('firstValue').enable();
}
});
}
HTML:
<form name="settingsForm" novalidate [formGroup]="settingsForm">
<label class="switch">
<input formControlName="firstValue" type="checkbox" class="form-control">
<span class="slider round"></span>
</label>
<label class="switch">
<input formControlName="secondValue" type="checkbox" class="form-control">
<span class="slider round"></span>
</label>
</form>