Datepicker required validation is wrong

micobarac commented 5 years ago

Reproduction

StackBlitz example:

https://stackblitz.com/edit/angular-x2g8lj?file=app%2Fdatepicker-overview-example.ts

Steps to reproduce:

Enter any invalid date value, like jjj
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!

  <mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date" required formControlName="date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

    this.form = this.formBuilder.group({
      date: ['', Validators.required]
    });

So, for any non-empty invalid value, instead of:

  <small *ngIf="date.errors?.required && !date.errors?.matDatepickerParse && date.touched" class="mat-warn">Date is required
  </small>
  <small *ngIf="date.errors?.matDatepickerParse && date.touched" class="mat-warn">
    Date is invalid
  </small>

there should be:

  <small *ngIf="date.errors?.required && date.touched" class="mat-warn">Date is required
  </small>
  <small *ngIf="date.errors?.matDatepickerParse && date.touched" class="mat-warn">
    Date is invalid
  </small>

Also, instead of:

{ "required": true, "matDatepickerParse": { "text": "jjj" } }

there should be:

{ "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:

{ "required": true, "matDatepickerParse": { "text": "jjj" } }

Environment

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