angular / angular/components

Datepicker required validation is wrong

Open
#16,761 4 comments 7 reactions 0 assignees View on GitHub
area: material/datepicker P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

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

Contributor guide

Open the contributing guide

Research direction

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.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.