angular / angular/components

Reactive forms inside virtual scroll list yield buggy behaviour

オープン
#13,846 コメント 9 件 リアクション 2 件 担当者 0 名 GitHub で見る
area: cdk/scrolling P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

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

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

まず、リンクされた StackBlitz の再現コードを実行し、スクロール中の Angular CDK 仮想スクロールリストとリアクティブフォームのチェックボックス値の相互作用を調べます。最後の項目にチェックを入れ、先頭に戻り、再び末尾までスクロールするという報告された手順を再現します。完了条件は、記載されているブラウザで、その手順全体を通して各チェックボックスが自身の値だけを保持することです。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。