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.
Blitz can be seen here Any advice or tips would be helpful. Thanks
To reproduce this issue, you can scroll all the way down to last item and mark it uncheck and then scroll back to top and go back down again. You will see erratic behaviour, it will be marked checked again. And on clicking any in middle or at top, other ones will be checked also randomly.
So there are possible two known fixes to me.
Use an external index. In my case, i added a new form control inside the form group named 'index' and added the incremented value to each form group. Then i used this as [formGroupName]="item.controls.index.value" and use this as an index to access values.
Other work around is to use [formGroup]="item" instead of [formGroupName]="i". This solution was provided in Angular Material repository.