Components: Reactive forms inside virtual scroll list yield buggy behaviour

[fahadmajeed]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

Reactive forms inside a virtual scroll list, should behave as expected. It looks like virtual scroll takes over and manipulates index which yields in erratic behaviour. If we check the last item in form array as checked and then go back to top and come back again to bottom, it is marked checked again. Tried external index as well but that didn't help either.

Expected behavior

Reactive forms especially checkboxes should behave normally, and their values should belong to
appropriate ones only. Marking one checked should not affect others.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

For heavy or huge reactive forms, virtual lists should render form controls normally.

Environment

Angular 7 and CDK 7

Angular version: 7.0.0


Browser:
- [x] Chrome (desktop) version 67.0.3396.87
- [x] Firefox version latest
- [x] Safari (desktop) version 12
- [x] IE version 11



Others:
Code sample can be seen on [stackblitz](https://stackblitz.com/edit/angular-mnd3k1) or [here](https://stackblitz.com/edit/angular-mnd3k1)

[manklu]

Works for me if I change [formGroupName]="i" to [formGroup]="item"

https://stackblitz.com/edit/angular-qqfktj?file=src/app/app.component.html

[fahadmajeed]

@manklu That seems to work for me too. Thanks. Is this a workaround? Could you explain why it behaves that way? Even index (i which is from let i=index;) seem to be correct also.

[fahadmajeed]

@manklu OK have another issue with the fix you suggested.
Logic is such that if checkbox is checked, the other price field should be disabled. Now you can see, random price fields are disabled even if the checkbox is not checked and vice versa. On top of that if you scroll up and down, we lose the previously set values. See blow:
https://stackblitz.com/edit/angular-mnd3k1?file=src%2Fapp%2Fapp.component.ts

[manklu]

@fahadmajeed

Could you explain why it behaves that way?

No, I just felt like it could work.

[manklu]

@fahadmajeed

It looks like disabling the template cache fixes the problem.

https://stackblitz.com/edit/angular-nh7ym3

I don't know if this is a bug or a feature. 😏

[fahadmajeed]

lol yeah template cache disabling seems to work. Good find (y)

[ahnpnl]

thanks @manklu, I ran into the same issue when using [(ngModel)], for my case I don't have a form surround my item list.

[ofcyln]

I was able to manage it by getting a payload from API request which includes index numbers of each items.

Virtual scroll was changing filtered items' index on the page simultenously on typeahead.
That was causing the problem to catch which element is clicked on the page.

[filipesousamail]

@ofcyln : could you elaborate a bit more on your solution, please? Or maybe provide a working example? Thanks!