angular / angular/components

Reactive forms inside virtual scroll list yield buggy behaviour

Offen
#13,846 9 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/scrolling P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

## 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)

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Führe zunächst die verlinkte StackBlitz-Reproduktion aus und untersuche beim Scrollen die Interaktion zwischen der Angular CDK-Liste für virtuelles Scrollen und den Checkbox-Werten des Reactive Forms. Reproduziere die gemeldete Abfolge: das letzte Element auswählen, zum Anfang zurückkehren und wieder nach unten bis zum Ende scrollen; abgeschlossen ist dies, wenn jede Checkbox in den aufgeführten Browsern während dieser Abfolge nur ihren eigenen Wert behält.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.