angular / angular/components

Datepicker required validation is wrong

Abierto
#16,761 4 comentarios 7 reacciones 0 asignados Ver en GitHub
area: material/datepicker P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

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

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
38/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.