<input type="number" max="{{max}}"> does not set $error.max property

[Scaalp]

When using an input of type number, with the max (or min) attribute set from the model, then the max field is not set in the error object of the input. This is due to the fact that in method "numberInputType", the value of attr.max is undefined. It is (probably) set from the model only later.

Checking the HTML, shows that the max attribute gets the correct value, set from the model.

In summary, the following does not work as expected:
input type="number" max="{{max}}"
The $error for this input field does not contain a boolean value named "max".

Here is a demo : http://plnkr.co/edit/YiExG5GpFt5MKKXoO4GE

[vorburger]

this is possibly related to issue #2144 - there clearly are some issue with cross-browser input type=number.. :(

[jamie-pate]

I think the parseFloat line should be moved inside the maxValidator function. The interp seems like it's already being done beforehand, but the validator is trying to be 'smart' and pre-compute it. I've tried it and it seems to work well (in chrome)

[jamie-pate]

Will require further testing and unit tests, but this fixed it for me:
https://github.com/jamie-pate/angular.js/compare/scwp

[jamie-pate]

This appears to be solved in the latest angular 1.2.3

[rmourato]

Problem still occurring in v1.2.7.

The documentation may indicate that it's expecting a string, but it does go against expectation as this complicates things if you want all properties to be databound and not something mid-term.
Silly thing is that the spinner still limits min/max properly according to the {{expression}}, and the browser also validates the form correctly on submission if "novalidate" isn't present.
The missing bit, really, is $error.min/max not updating.

[IgorMinar]

I can't repro this with 1.2.7: http://plnkr.co/edit/4HU4jdG1ljrnoXYuegQo?p=preview

it appears to work correctly. can you please post expected vs actual result and any other instructions needed to repro the bug.

[rmourato]

Hi Igor,

Thanks for having a look at this!
I can see everything works fine in your Plunkr and can't get it to break, so I don't know why on my case it doesn't work. The only thing I'm realising is that, on the generated HTML for my input element, angular isn't adding the ng-valid-min and ng-valid-max classes as in your Plunkr.

An adapted version of yours generated (works):

<input type="number" name="P4" min="0" max="100" ng-model="container.P4.quantity" 
class="ng-pristine ng-valid ng-valid-number ng-valid-max ng-valid-min">

My generated HTML (doesn't work):

<input type="number" name="P4" min="0" max="100" ng-model="container.P4.Value" 
class="ng-pristine ng-valid ng-valid-number">

Resulting in:

myform.P4.$error = {"number":false}
myform.P4.$error.min =
myform.P4.$error.max =

I can't reproduce my problem in the Plunkr, so I'm at a loss.
Any ideas on what I might be doing wrong?

[Deklin]

We are having this issue with 1.2.13
Here is a fiddle showing the issue. Please use chrome to test:
http://jsfiddle.net/sberube/BnE73/

Steps:

1. For enter a number, type in 115
   1a. Observe that value.$error.max goes to true meaning the # has failed MAX validation
2. Change the dropdown to Unlimited, this should set {{max}} to 500 where before it was 100
   2a. Observe that the $error still shows a max error when the number is now in the valid range.
3. Type 116 in the input field
   3a. observe that $error.max goes to false

So the {{max}} interpolation is not re-validating the input, but changing the input causes re-validation including the new value. This is the bug we are experiencing with 1.2.13

EDIT:
We are going to see if this solves our issue until angular natively supports this:
http://jsfiddle.net/g/s5gKC/

[Deklin]

Caitlin;
According to the documentation it does:
http://docs.angularjs.org/api/ng/input/input%5Bnumber%5D

On Wed, Feb 19, 2014 at 11:03 AM, Caitlin Potter
notifications@github.comwrote:

I'm not sure what you were expecting, angular doesn't support the maxattribute

Reply to this email directly or view it on GitHubhttps://github.com//issues/2404#issuecomment-35514255
.

[rwinzhang]

The issue appears on this case http://plnkr.co/edit/4CPpJl when min and max value are dynamically set.

[robjames]

I think the solution to this is the novalidate attribute - Well, solved it for me anyway.

[jamie-pate]

I am currently having a related issue. In my case, when the numberInputType controller is instantiated, attr.min and/or attr.max evaluate as falsy. The solution is to replace if (attr.max) with if ('max' in attr) and if (attr.min) with if ('min' in attr)

Unfortunately my employer thus far has not approved (and looks like it won't any time soon) the CLA so someone else will have to make this PR.

PS: also needs a check for NaN since attr.max could be anything during validation now.