angular / angular/components

Datepicker required validation is wrong

Đang mở
#16,761 4 bình luận 7 reaction 0 người được giao Xem trên GitHub
area: material/datepicker P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
38/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.