angular / angular/components

bug(datepicker): Date range input by keyboard validation is incorrect

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

説明

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

On a date range picker, write dates in incorrect order (start > end) like `01/01/2012 - 01/01/2011`. The component shows a validation error. After correcting the start date using the keyboard to `01/01/2010`. The error isn't removed until the end date is modified, even setting the same end date using the keyboard.

### Reproduction

StackBlitz link: https://stackblitz.com/run?file=src%2Fapp%2Fdate-range-picker-forms-example.ts
Steps to reproduce:
1. Focus on the start date field.
2. Write (keyboard input) `01/01/2012`
3. Tab to change focus to the end date input field.
4. Write (keyboard input) `01/01/2011`
5. Shift+Tab to return to the start date field.
6. The validation error is shown.
7. Write (keyboard input) `01/01/2010` on the start field.
8. Tab to change focus to the end date input field.order.
9. The validation error is still present even when the dates are in correct order.
10. Delete anything on the end date and add what you deleted again, to have the same end date as before.
11. The validation error disappear.

### Expected Behavior

Correcting the start date on step 7 should fix validation error.

### Actual Behavior

Correcting the start date on step 7 doesn't fix the validation error.

### Environment

@angular-devkit/architect 0.1600.3
@angular-devkit/build-angular 16.0.3
@angular-devkit/core 16.0.3
@angular-devkit/schematics 16.0.3
@angular/cdk 16.0.2
@angular/material 16.0.2
@schematics/angular 16.0.3
ng-packagr 16.0.1
rxjs 7.8.1
typescript 5.0.4

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

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

調査の方向性

src/app/date-range-picker-forms-example.ts の StackBlitz 再現から始め、date-range picker のキーボード入力経路を追ってください。記載されている手順を再現し、その後、開始日を修正すると終了日を変更せずにバリデーションエラーがクリアされることを確認してください。

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

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
38/100

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

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