Reactive forms inside scroller behaves erratic

[fahadmajeed]

Hi, I was checking virtual scroll list with reactive forms. Scenario is that i have thousands of rows to show in a list with checkboxes to approve or disprove. So inside virtual list i am generating form group with [formGroupName]="i". But if i check one checkbox, while scrolling it randomly selects and checks other checkboxes too. This is really weird. Do you have any work around or proper way to do it? Also how can i put external index? Please help

[speige]

I don't have any experience with reactive forms, so I'm not the best one to help resolve this. Hopefully someone else will chime in. However, I know #170 was also related to reactive forms, maybe a comment in that issue will help you?

To get the external index you have two options.

1st) Wrap your objects in a property and add an index property something like this (untested):

let wrappedItems = items.map(function (item, index) { return { index: index, item: item  }; });

<virtual-scroller #scroll [items]="wrappedItems">
    <div *ngFor="let wrappedItem of scroll.viewPortItems">{{wrappedItem.item.name}} {{wrappedItem.item.index}}</div>
</virtual-scroller>

or 2nd) Use angular indexing on *ngFor and do math off virtual-scroller viewPortInfo property Example code (untested):

<virtual-scroller #scroll [items]="items">
    <div *ngFor="let item of scroll.viewPortItems; let i = index;">{{item.name}} {{i + scroll.startIndexWithBuffer }}</div>
</virtual-scroller>

Hope that helps. Good luck!

[nisitkaswaninsta]

+1

[speige]

If you could create a stackblitz to reproduce the issue it'd be easier for others to help troubleshoot it.

[fahadmajeed]

Sure thing. Here is the link https://ngx-virtual-not-working-xbco9k.stackblitz.io or https://stackblitz.com/edit/ngx-virtual-not-working-xbco9k .

So to test, just mark first few checkboxes and then scroll to bottom or middle. Then come back to top and you'll see those checkboxes losing state and unchecked again.

[speige]

@fahadmajeed I'm not sure this stackblitz shows your original issue. You mentioned that checkboxes are randomly being checked/unchecked while scrolling. I don't see this happening.

The issue I see with the stackblitz is that when an item is scroll out of view it's checked state is lost. Virtual-Scroller physically removes items from the DOM (similar to *ngIf) when they're scrolled out of view, so the checked state needs to be saved/restored somewhere. You need to code some form of data binding on the checkbox (ngModel, [checked]= (change)=, etc).

If you can update the stackblitz to reproduce the original issue, I'm happy to look at it again. I believe implementing data-binding will work, but if you have a stackblitz demonstrating that it's not working, I'll look at that as well.

Good Luck :)

[tharuka95]

Hi, @speige I also got the same issue which checkboxes losing state and unchecked again when scrolling again to the top. Is there any solutions after new fixes in the library. Thanks!