I am dealing with 2 arrays in the request data - one for included products and the other for excluded products. It is important to note that these two arrays cannot be used simultaneously. Therefore, my HTML code looks like this:
<input [formControl]="this.exclude$ ? excludedFormControl : includedFormControl>
<mat-slide-toggle (change)="excludeChange($event.checked)"></mat-slide-toggle>
Below is my TypeScript code:
exclude$ = new BehaviorSubject<boolean>(false);
currentFilter = {
productsSection: {
includedIds: [],
excludedIds: [],
},
};
includedFormControl: FormControl = new FormControl(
this.currentFilter.productsSection.includedIds ? this.currentFilter.productsSection.includedIds : [],
);
excludedFormControl : FormControl = new FormControl(
this.currentFilter.productsSection.excludedIds? this.currentFilter.productsSection.excludedIds: [],
);
excludeChange(value: boolean): void {
this.filterForm.patchValue({
includedIds: [],
excludedIds: [],
});
this.exclude$.next(value);
}
showFormValue() {
console.log(this.filterForm.value);
}
Issue: The problem arises when I switch the toggle as the excludeChange function is triggered but the input still writes data into the includedIds field instead of the intended exclusion.