I have two checkboxes which help filter data. I have a function which clears the filter, but the checkboxes remain checked.
I tried ngModel, but with no success.
<label class="filterlable" for="">Other:</label>
<label><input id="CPRBox" type="checkbox" [value]="3" [checked]="CPRBox" (change)="includeOthers(3)"> CPR Certified </label>
<label><input id="NotaryBox" type="checkbox" [value]="2" [checked]="NotaryBox" (change)="includeOthers(2)"> Notary </label>
This sets the value when the box is clicked:
includeOthers(id): void {
const index = this.otherArray.indexOf(id);
if (index == -1) {
this.otherArray.push(id);
} else {
this.otherArray.splice(index, 1);
}
this.addQueryParams({ other: this.otherArray.length > 0 ? this.otherArray.toString() : null })
}
This clears the filter, but the box(es) remain checked.
clearFilters() {
this.otherArray = [];
this.CPRBox = false;
this.NotaryBox = false;
}
When clearFilters() runs, the checkboxes should no longer be checked.
Right now, the filters are cleared, but the boxes remain checked. Which means, when the user clicks on the boxes a 2nd time, the filters are enabled, but the boxes are not checked, leading to a confusing state of the filter.
Aucun commentaire:
Enregistrer un commentaire