Error ng-invalid-date - (Solutions in badInputChecker() )

[mxnho]

I have a input type = "Date" not required in my form linked to a
ng - model = "date" , when I add a value to the component
and then use the delete key to erase the value , the angular adds
the ng -invalid class component and adds to the value undefined , making my form
invalid.

The solution would be changing the function which adds badInputChecker undefined
for the component , that function should be changed to set null instead of undefined.
Thus, the component will only be invalid if required .

function badInputChecker(scope, element, attr, ctrl) {
var node = element[0];
var nativeValidation = ctrl.$$hasNativeValidators = isObject(node.validity);
if (nativeValidation) {
ctrl.$parsers.push(function(value) {
var validity = element.prop(VALIDITY_STATE_PROPERTY) || {};
// Detect bug in FF35 for inputemail:
// - also sets validity.badInput (should only be validity.typeMismatch).
// - see http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#e-mail-state-(type=email)
// - can ignore this case as we can still read out the erroneous email...
//return validity.badInput && !validity.typeMismatch ? undefined: value; old
return validity.badInput && !validity.typeMismatch ? null : value; //new
});
}
}

Best regards

[gkalpak]

I think this is a duplicate of #12207.

If that is indeed the case, you can take a look at #12207 (comment) for temporary work-around (until this is properly resolved).
If not, please, provide a live reproduction (e.g. using CodePen, Plnkr etc) so we can indentify the issue (and hopefully fix it 😃).

[mxnho]

It is not the same problem.
When you clear the input value using only the keyboard (backspace or delete keys) the form should return to valid if the input is not required, this actualy happens when you click the "X" button within the input.

Have this plnker.

It is actually a fork from the one you linked.

1 - Choose a Full Date.
2 - Check if myForm.$valid = true
3 - Use the "X" to clear the value
4 - Check if myForm.$valid = true

It is working as expected, now the problem:

1 - Choose a Full Date.
2 - Check if myForm.$valid = true
3 - Remove the year using keyboard (del or backspace)
4 - Check if myForm.$valid = false
5 - Remove the month using keyboard (del or backspace)
6 - Check if myForm.$valid = false
7 - Remove the day using keyboard (del or backspace)
8 - Check if myForm.$valid = true

It is not working as expected, it should return to $valid.

[gkalpak]

Actually, it is the same. The problem does not lie in badInputChecker, but the fact that no input event is fired when deleting parts (year, month, day) of an already invalid value.

For a more detailed explanation and a temporary work-around, read the discussion in #12207.
(Here is the demo of the work-around for easier reference.)

Closing as duplicate of #12207.

[kimx]

Hi @gkalpak
I found another problem in Chrome.
1.Key in Month or Date or Year.Dot not use choose.
2.Use the "X" to clear the value -->Now $valid=true -->expect
3.Key in Month or Date or Year again.
4.Use the "X" to clear the value -->Now $valid=false -->error

http://plnkr.co/edit/2HPDq0bjzReyuNbvn7vz?p=preview

[gkalpak]

@kimx, seems like a valid issue. Can you please open a new issue ?

[gkalpak]

Interesting facts:

1. When the mousedown event fires (when clicking on the "X"), it sets up a 0-delay timeout to check if the validity of the input has changed. We expect that by the time the timeout is triggered, the input will have changed (i.e. will have been cleared in this case) and the validity will have been restored. It doesn't.
2. By trial-and-error, I found out that a delay of 150ms is sufficient for the change to be picked up, but this threshold will probably differ based on browser/OS/device.
3. The first time you click the "X", an input event is also triggered, thus we are able to detect the change properly. This is why your step (2) above works. For whatever reason, the input event is only triggered the first time 😒

[kimx]

So…Do you have any suggestions?

[gkalpak]

@kimx: I have a few. For whom?

For users: As a workaround, you can trigger an input event after a short timeout on mousedown (demo).

For Chrome: Always trigger an input event, when then user clicks "X".

For us: Not sure. Listening for mouseup (instead of or in addition to mousedown). Adding a small delay (150-200ms). TBH, I don't remember what mousedown event we expect to change the input. IS it only clicking the "X" or are there other usecases that we need to take into account?

For you: Open a new issue, so we can track this. (I know I could do it myself, but it's your finding - I don't want to steal your thunder 😛 )

/cc @jbedard

[kimx]

@gkalpak
Thanks for help. I've opened a new issue.
#14740
I think that I can used your suggestion (For users) to solve this odd problem temporary for this time.