I utilized the instructions from this post to implement a slider. However, I encountered an issue with the controller when navigating to subsequent pages. While the controller functions correctly on the initial page, it duplicates the same values on the following pages. For example, if "Product 1" is active in the first line of page 1, it appears as active even on the second page, despite not being so. This pattern repeats across all pages. I suspect the problem lies within my ts code. DEMO Kindly review my code below:
populateFormGPS() {
this.ws.getAllGpss().subscribe(
gpss => {
this.gpss = gpss
console.log(gpss)// all value arrive ok
let controls = {
'gps_id': new FormControl('', Validators.required)
};
for (let i = 0; i < this.gpss.length; i++) {
controls['gps_actived-' + i] = new FormControl(this.gpss[i].gps_actived === 1, Validators.required)
}
this.acitveGPSForm = new FormGroup(controls);
this.patchForm();
}
)
}
patchForm() {
this.acitveGPSForm.patchValue({
gps_id: this.gpss.map(x => x.gps_id),
});
}
Here is the HTML code snippet:
<div class="row">
<div class="col s12 m2">
<label class="col s12 label-control" style="padding: 0px">Rows on page</label>
<select class="form-control input-sm" [(ngModel)]="rowsOnPage">
<option [ngValue]="5">5</option>
<option [ngValue]="10">10</option>
<option [ngValue]="20">20</option>
</select>
</div>
...............
.......... //Code truncated for brevity
..............
</table>
If you have any insights on how to address this challenge, your assistance would be highly appreciated.
Thank you.