I encountered an issue with my screen layout.
https://i.sstatic.net/bFeZN.png
The problem arises when I select checkboxes from the first segment (Man Segment) and move to the second segment (Woman Segment) to choose other checkboxes. Upon returning to the first segment, all my previous selections are unchecked even though the form controls still retain the values. I am using a form array where I push a new form control with a value each time a checkbox is checked, and remove it when unchecked.
Here is the code snippet for better clarity:
constructor(public fb : FormBuilder){
this.checkboxForm = this.fb.group({
categories : this.fb.array([],CustomValidators.multipleCheckboxRequireAtleastOne)
});
}
updateCheckedOptions(category, isChecked) {
const categories = <FormArray>this.checkboxForm.controls['categories'];
if(isChecked) {
categories.push(new FormControl(category));
console.log(categories.controls);
}
else {
let index = categories.controls.findIndex(x => x.value.id == category.id);
categories.removeAt(index);
}
}
And in the view:
<form [formGroup]="checkboxForm" (ngSubmit)="onSubmit(checkboxForm.value)">
<ng-template *ngFor="let category of categories; let i=index">
<ion-checkbox (ionChange)="updateCheckedOptions(category,$event.checked)">
</ion-checkbox>
</ng-template>
<button type="submit" ion-button [disabled]="!checkboxForm.valid">go next</button>
</form>
Any suggestions on how to solve this issue would be greatly appreciated.