DatePickerInput date parsing validation incorrect (setting _lastValueValid in _onInput() seems incorrect) #8045
Description
Bug, feature request, or proposal:
Bug
What is the expected behavior?
Invalid input strings entered into the datepicker input should add the "matDatepickerParse" validation to the errors collection
What is the current behavior?
"matDatepickerParse" validation object is not added to the errors collection, instead the required error is raised
What are the steps to reproduce?
Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.
Plunker starter (using on @master): https://goo.gl/DlHd6U
StackBlitz starter (using latest npm release): https://goo.gl/wwnhMV
What is the use-case or motivation for changing an existing behavior?
The user cannot be notified of incorrect date formats they have entered which leads to confusion and bad UX
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
4.4.6
Is there anything else we should know?
The _onInput method in the date-picker-input component calls the date adapter to parse the value input by the user. The adapter parse method should either return a valid Date instance or null. The private variable _lastValueValid is then set via the below expression.
If the date adapter fails to parse the input string it should return null (as per the DateAdapter interface) the date property above would then be null. The expression:
!date
would evaluate to true which in this case is the incorrect value as the date is null the value of this._lastValueValid should be false. After this method fires the validation on the control is invoked, specifically the _parseValidator validation function to determine if the last user input is valid. This method relies on the private property this._lastValueValid. In the context where the user has entered an invalid date string, the date adapter is unable to parse the string into a valid date so returns null. This validation function is then invoked (see below) and as the property this._lastValueValid is incorrectly set as true it does not return the "matDatepickerParse" validation error object.
The expression to set the property this._lastValueValid should be something like the below.
this._lastValueValid = date instanceof Date && this._dateAdapter.isValid(date);