Components: DatePicker "matDatepickerParse" validator not working on first time value change.

[keatkeat87]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

it will run validate all the time.

What is the current behavior?

it will run validate only after i select a date.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://stackblitz.com/edit/angular-szevpj?file=app/datepicker-filter-example.html

step to fail :

1. keyin value 'abc' in datepicker input
2. unblur the input
3. you should see the 'required' and 'matDatepickerParse' error, but 'matDatepickerParse' missing.

step to success :

1. select a date first
2. change input value to 'abc'.
3. you will see the 'required' and 'matDatepickerParse' error. it is expected behavior.

What is the use-case or motivation for changing an existing behavior?

In Material 5.x, it work as expected.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.0.3
Material 6.1.0

Is there anything else we should know?

[micobarac]

Is this issue officially fixed, or waiting for pull request? I installed the latest version of Angular Material from NPM, but nothing has changed. This issue seems still unresolved.

[crisbeto]

The pull request is still open.

[DavidMarquezF]

When do you belive this issue will be fixed/closed? It would be really nice to have this fixed.

[aeslinger0]

Any update? Will this fix #10861 as well?

[timbyng]

This needs to either be merged ASAP or a workaround needs to be given, as the severity of this issue is high. This both prevents valid values and allows invalid values.

Scenario 1: Field is shown as invalid when no value is present even though there is no required validator

Steps to reproduce:

1. Enter a valid value
2. Change it to an invalid value.
3. Change it to an empty value.

Expected behaviour:

matDatepickerParse error does not exist

Actual behaviour:

matDatepickerParse error exists

Since it does not believe the value has been changed since it was invalid, the matDatepickerParse error is not removed.

Scenario 2: Field is shown as valid even though an invalid value has been entered

Steps to reproduce:

1. Enter a valid value
2. Change it to an empty value.
3. Change it to an invalid value.

Expected behaviour:

matDatepickerParse error exists

Actual behaviour:

matDatepickerParse error does not exist

Since it does not believe that the value has been changed since it was valid and empty, the matDatepickerParse error is not added.

Note: It appears that this was working as expected in 5.0.0-rc0 and that it was broken sometime after that. Please see https://stackblitz.com/edit/angular-material2-issue-jpjn8q?file=app/app.component.html and https://github.com/angular/material2/issues/8045.

[ienzam]

Is there any progress on this?

[KlausHans]

I stumbled over this too when the date invalid message did not disappeared if i delete the invalid date.
A possible workaround that worked for me:
Use

@ViewChild('datepicker', { read: MatInput })
public datepicker: MatInput;

and

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

To delete or change the value:

this.datepicker.value = '';

If you want to check for errors in the date input you'll need a second viewchild:

@ViewChild('datepickerModel')
public datepickerModel: NgModel;

and

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

Edit: Well, it seems to work only if the value gets deleted via ts. Sorry, so no full workaround.

[damoe86]

Has there been any progress with this issue? We are unable to use the above workaround as the value change is being triggered by the Reactive Forms Framework formGroup.patch() operations.

The validation errors appeared correctly in Material 5.0. The DatePicker is the only control with this issue.

[erwindemoel]

+1, we are having the same issue. When will this be fixed?

[Shank09]

looks to be working in version 8.

https://stackblitz.com/edit/angular-bmrxem

@angular/material: 8.2.1
@angular/core: 8.2.10

[snehagodbole]

To fix the issue i have implemented custom validator and in that added following code to skip matDatepickerParser validator :) . It worked like a chirm for me.
if (control.errors && control.errors['matDatepickerParse'] && control.errors['matDatepickerParse'].text !== '') {
return null;
}

[logineimer]

Got this bug in angular 10. @snehagodbole workaround is not working for me.

[jeler]

This is still an issue. I've tried suggestions here and they haven't worked.

[astik]

FWIW, i just test with angular 11 (11.1.2), building from @Shank09 code with Angular 8. It works as expected: https://stackblitz.com/edit/angular-ivy-gzzh5d