Datepicker required validation is wrong
- 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
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