angular / angular/components

Datepicker required validation is wrong

Ouverte
#16,761 4 commentaires 7 réactions 0 personnes assignées Voir sur GitHub
area: material/datepicker P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
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
```

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
38/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.