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.

[TimoPot]

@gkalpak to add to your comment of 11 Sep 2015 you said:

when adding data into the input, the change event is only fired after all field (day, month, year) have been filled.

This is partially true, it depends which keys you use to edit the date. If I type the following (wrong) date in one flow then no validator is triggered: 31112015. Even if I leave the field it is still not triggered. When I return to the field and change the year it is not triggered. When I change the day or month the it gets striggered.

[gkalpak]

@TimoPot, indeed, I was referring to filling the fields with valid data. If not, the input remains empty (aka unchanged).

[TimoPot]

Ah missed that. Well actually the input is not empty after all I've just entered a value ;-)

am I correct to notice that this issue is not solved yet?

[TimoPot]

Also manually invoke $validate() or $setTouched() or $setDirty() on the date field does not help to get the date validated. Is there a known workaround?

[Narretz]

@TimoPot The problem is that for Angular the input is actually empty, because the browser does not set the value property of the input when invalid data is entered (for date and number), and therefore doesn't fire a change / input event.

I think we need to listen to key events in addition to the input / change event. I believe @gkalpak worked on a PR for this, we should try to get it in after 1.5.

[gkalpak]

The workaround I've used (and is more or less what is included in the PR) is to trigger an input event, whenever a keyup event is fired on date fields. Demo pen

I'll resume work on the PR, so we can get this fixed soon.

[TimoPot]

Oke. I assume the Demo pen will follow.
Thanks.

[gkalpak]

@TimoPot, btw, it's not a proper solution, because one needs to take into account keys that do not change the input (e.g. modifiers etc) and possibly other stuff. But it's good enough for a quick workaround.