Bug with type="number" validation

[pablo.caselas]

I am having an issue trying to validate a number with angularJS in chrome.

If I have an input with type="number" which isn't required and I type a number first, it validates perfectly, then if I change it to text it will still ve balid, since in the model there's no value saved.

Here's a plnkr to ilustrate this behaviour:

http://plnkr.co/edit/99tRB7Xl3ADj4TmPWiLL?p=preview

Any ideas?

[pablo.caselas]

Am I doing something wrong or there's just now solution to this issue for now?

[Peter Bacon Darwin]

I think you could argue that this is a bug.  The trouble is that the browser returns an empty string to AngularJS if the contents is not a number: http://plnkr.co/edit/Yxouz1MTX92ibaXqTcbN?p=preview

In the numberInputType directive it doesn't consider empty strings to be invalid:

function numberInputType(scope, element, attr, ctrl, $sniffer, $browser) {

  textInputType(scope, element, attr, ctrl, $sniffer, $browser);

  ctrl.$parsers.push(function(value) {

    var empty = isEmpty(value);

    if (empty || NUMBER_REGEXP.test(value)) {

      ctrl.$setValidity('number', true);

      return value === '' ? null : (empty ? value : parseFloat(value));

    } else {

      ctrl.$setValidity('number', false);

      return undefined;

    }

  });

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[pablo.caselas]

Is there a way to access the text that's on the input to hack it and make it work on Chrome? 

[Peter Bacon Darwin]

Not that I know of.

[Kai Groner]

It looks like the browser is setting .validity.badInput = true.

I wrote a quick directive to feed that data to the ngModel controller.  It's working in chrome, but probably needs more testing.

http://plnkr.co/edit/q0HmACwbyYMioat0oRSv

Kai

[Brad Rice]

Cool, I was following this one to see if someone came up with a solution.

Brad Rice
brad...@gmail.com
~
Do all that you can to live in peace with everyone. Rom 12:18 NLT

[Pablo Caselas]

Great work Kai!!

It would be awesome if the angular team added this kind of behaviour to the number validator.

[Peter Bacon Darwin]

You could try creating a PR?  I am not sure if the solution is quite battle hardened yet though.

[Jonathan Card]

I just bumped into this for the fist time today. I'd definitely call this an AngularJS bug and agree with @groner on the appropriate solution (https://github.com/angular/angular.js/issues/2144). Any more work or pull request for this yet?

[Owen M]

Also ran into this. Another solution would be to prevent the user from inputting an invalid value. User tries to type a character or paste a value, just block the interaction and keep the value as a valid numeric value, or blank. This is also inline with the spec:

http://www.w3.org/TR/html5/forms.html#number-state-(type=number)

"User agents must not allow the user to set the value to a non-empty string that is not a valid floating-point number."

Or is that a bad way to interpret the spec and what is trying to be done with type="number"?