0

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.

Safie Ur Rehman
  • 1
  • 1

2 Answers2

0

In the array ngFor you have let i = index; you can use it and will transfer to @Input() directive to your slider component

Jared Forth
  • 1,577
  • 6
  • 17
  • 32
Dmitry Vasilkov
  • 76
  • 2
0

Explanation: So what i wanted to achieve was creating as many slider instances as the number of rows/values returned by the service stored in "parameters" array. With Form Control, you have to manually create as many variables as the parameters. i.e Form Control SliderControl_1, SliderControl_2,... With as much as 50 parameters, it isn't efficient so there i made a FormArray to accommodate slider in which i dynamically created and pushed FormControls.

Update I also switched to Ngb pagination in code but it wouldn't affect the dynamics

There are some things to be remembered:

  1. ng-5 slider doesn't bind to FormArray hence with ng-5 slider, you can't save each individual slider's value during pagination. For this, i had to use HTML's input range slider (Form Array only binds to Input) as seen in the code;

HTML Code:

<form class="form" method="" action="" [formGroup]="registerForm" (ngSubmit)="register()">
    <div class="row" formArrayName="slider_list"
        *ngFor="let parameter of parameters | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize; let i = index">
        <div class="row">
            <div class="form-group form-check" [formGroupName]="pageSize * (page - 1) + i">
                <input type="range" class="slider" list="tickmarks" formControlName="value" min="0" max="3" step="1" (change)="saveRange($event,i,page)">
                <div class="sliderticks">
                    <p>0</p>
                    <p>1</p>
                    <p>2</p>
                    <p>3</p>
                </div>
            </div>
        </div>
    </div>


        <div class="submit text-center">
            <ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="parameters.length" (pageChange)="scrollUp($event)" class="pagination-primary"> </ngb-pagination>
        </div>
</form>

TS Code

registerForm: FormGroup;
slider_list: FormArray;
page: number = 1;
pageSize: number = 20;

parameters: Array<any> = [];


ngOnInit() {
    this.recommendationService.getParameters().subscribe(

        async res => {
            this.parameters = res.parameters;
            await this.populate_data();
        },
        err => { });

    this.registerForm = this.formBuilder.group({
        slider_list: this.formBuilder.array([])
    });
    this.slider_list = this.registerForm.get('slider_list') as FormArray;
}

public populate_data() {
    this.slider_list = this.registerForm.get('slider_list') as FormArray;
    //initializing sliders equivalent to parameters with 0
    for (var j = 0; j < this.parameters.length; j++) {
        this.slider_list.push(this.formBuilder.group({
            value: 0,
        }))
    }
}

//offset is absolute index, as in pagination index sets to 0 on every page
var offset = this.pageSize * (page - 1) + index;

//calling these lets you get the slider value at a particular offset
this.slider_list = this.registerForm.get('slider_list') as FormArray;
console.log (this.slider_list.at(offset).value.value);
Safie Ur Rehman
  • 1
  • 1