angular / angular/components

Datepicker required validation is wrong

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

説明

#### Reproduction

**_StackBlitz_** example:

[https://stackblitz.com/edit/angular-x2g8lj?file=app%2Fdatepicker-overview-example.ts](https://stackblitz.com/edit/angular-x2g8lj?file=app%2Fdatepicker-overview-example.ts)

Steps to reproduce:
1. Enter any invalid date value, like `jjj`
2. `date.errors.required` is always `true` for any invalid, non-empty value


#### Expected Behavior

Like with any other Angular Material component, using `Validators.Required`, `date.errors.required` should be `true` ONLY when the datepicker value is EMPTY!

```html





```

```ts
this.form = this.formBuilder.group({
date: ['', Validators.required]
});
```

So, for any non-empty invalid value, instead of:

```html
Date is required


Date is invalid

```

there should be:

```html
Date is required


Date is invalid

```

Also, instead of:

```json
{ "required": true, "matDatepickerParse": { "text": "jjj" } }
```

there should be:

```json
{ "matDatepickerParse": { "text": "jjj" } }
```

as a value of `date.errors` object.

`matDatepickerParse` is a strange concept. Using a custom datepicker validator should be allowed instead of it.

#### Actual Behavior

For invalid non-empty values, this is the control errors object:

```json
{ "required": true, "matDatepickerParse": { "text": "jjj" } }
```

#### Environment

```console
Angular CLI: 8.2.0
Node: 12.8.0
OS: darwin x64
Angular: 8.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.802.0
@angular-devkit/build-angular 0.802.0
@angular-devkit/build-optimizer 0.802.0
@angular-devkit/build-webpack 0.802.0
@angular-devkit/core 8.2.0
@angular-devkit/schematics 8.2.0
@angular/cdk 8.1.2
@angular/flex-layout 8.0.0-beta.26
@angular/material 8.1.2
@ngtools/webpack 8.2.0
@schematics/angular 8.2.0
@schematics/update 0.802.0
rxjs 6.5.2
typescript 3.5.3
webpack 4.38.0
```

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

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

調査の方向性

Start with the linked StackBlitz reproduction and inspect the Angular Material datepicker form-control validation for the `date.errors` result when the input is `jjj`. Confirm the current required and `matDatepickerParse` errors, then verify that non-empty invalid values report only the parse error while empty values still report required.

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

評価

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

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

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