I am using FormContol to make multiple instances of Ng-5 slider in NgFor loop. During pagination using Ng-x Pagination, the values of slider are lost. I want to know how can i keep track of the slider values during pagination and how to dynamically assign each slider a new variable during each iteration to get/set values?
HTML:
<form class="form" method="" action="" [formGroup]="registerForm" (ngSubmit)="register()">
<div class="row" *ngFor = "let parameter of parameters | paginate: { currentPage: currentPage, itemsPerPage: itemsPerPage }; let i = index;">
{{parameter.name}}
<ng5-slider [options]="options" [formControl]="sliderControl" (userChange)="saveRange($event,i)"></ng5-slider>
</div>
<pagination-controls (pageChange)="currentPage = $event"></pagination-controls>
</form>
TS:
sliderControl: FormControl = new FormControl(0);
ngOnInit() {
this.recommendationService.getParameters().subscribe(
res => {
this.parameters = res.parameters;
this.semService.getAllTools().subscribe(
res => {
this.tools = res.softwares;
},
err => {
});
},
err => {
});
this.registerForm = this.formBuilder.group({
'slideControl': this.formBuilder.control(''),
});
this.sliderControl.setValue(0); //Initializes slider value to 0
}
I expect to get/set the values of each individual slider.