Changing only part of date (input) does not change form's pristine state (Chrome)

[fracz]

Have a look at this plnkr.

When (in Chrome) I click the year and type something - say 2015 - and blur the field, model value does not change.

However, when I select the date from calendar and then I delete the year value (select it and hit backspace), then field & form error are set as expected:

Not sure if Angular's or Chrome's issue as in Firefox it is working fine (although there is no date picker).

[wesleycho]

I did a little looking into here, it looks like if you type all of the date values (mm/dd/yyyy, say 03/14/2015), validation does occur.

This may have to do with how partial date entry is validated - I suspect it has to do with either the fact that it is an input of type date.

[TimoPot]

I've noted this issue also. Looking into angular.js I notices that validators are not trigger when a part of the date is changed or cleared.

I've als noticed that clearing the complete date (by using backspace in each part) does not trigger any validator.

When an input date is cleared I think it should return to its pristine and maybe untouched state. This does not happen.

[gkalpak]

As explained in #11622 (comment), I think this is due to the fact that an invalid or partial date sets the input's value to an empty string.
(Further edits on the already invalid date, will not have an effect on the input's value (it will remain empty), until a valid date is picked.)

It is related to how the browser does/doesn't emit input events upon partial input.
Responding to keydown on date inputs (as suggested by @Narretz), sounds like a viable solution.

[gkalpak]

A quick POV showed that the problem is not only the lack of firing input events.
Off the top of my head, another part of the problem must be the fact that once the input is an empty string, further (invalid) edits do not impose a change in the value ($viewValue), thus no validation is triggered (this.just a speculation though).

EDIT: See #12207 (comment).

[Narretz]

@gkalpak There's a condition inside $commitViewValue that forces validation etc. when the input has a native validator, even if the viewValue is empty: https://github.com/angular/angular.js/blob/master/src/ng/directive/ngModel.js#L652

The problem is that there's no change event in the following cases, because the browser does not register a change in the input's value (as gkalpak has pointed out)

• when adding data into the input, the change event is only fired after all field (day, month, year) have been filled.
• when removing data from the input, the change event is fired as soon as the date becomes invalid, but not when all data is cleared.

I think

[gkalpak]

@Narretz, I thought there was another issue, because my original POC (see #12207 (comment)) didn't work. It turned out to be a timing issue.

So, triggering input on keyup, seems to solve the issue.
The real problem is more related to how browsers fire input events on date inputs though (as described previously), so Angular might have to work around that.

@Narretz, wdyt about emulating input on keyup (or something) for date-family inputs ?

[Narretz]

@gkalpak Yeah, let's give it a shot. Do you want to open a PR? And I wonder if we should restrict it to Chrome, because FF and IE don't have datepickers (at least on desktop)

[gkalpak]

@Narretz, sure, PR is on the way.
Good idea restricting it to browsers that support input[type="date/..."] (currently Chrome and Edge - hopefully more in the future). Date inputs report type === 'text' in non-supporting browsers.