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

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

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

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)

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

This appears to be solved in the latest angular 1.2.3

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.

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.

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?

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:

For enter a number, type in 115
1a. Observe that value.$error.max goes to true meaning the # has failed MAX validation
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.
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/

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
[email protected]:

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
.

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

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

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.

Still present in 1.2.18

Still experiencing this issue on v1.3.10... http://plnkr.co/edit/uS4zsh05jeP7pF7A2aVk

Using an initialisation value that isn't null or "" resolves the issue for me e.g. $scope.max = "1"

@adrianduke

@adrianduke try

ng-max='{{max}}'

http://plnkr.co/edit/DF4R6vfQpf909jj19sFv?p=preview

BTW, this seems to have been fixed in 1.3.14 (plnkr) and 1.4.0-beta.5 (plnkr).

It would have expected this commit to fix it - b350283
But this was already there at 1.3.0

Ah! Fixed here: abfce53

@petebacondarwin

@petebacondarwin WIll it be released in upcoming 1.3.16 release?

@piotrkulpinski

@piotrkulpinski - this was already there in 1.3.14 and so will continue to appear in the next release too.

+1 here 1.4.x

Hi guys, in the documentation is missing the attr ng-max and ng-min for input type number.

@favio41

Interesting! They are not documented as standalone directives either...
@favio41, would you like to submit a PR ?

just use ng-min and ng-max
It solved all my problems!

For for old Angular versions use fallback values before model is initialized:
max="{{max || 99999}}"
It worked for me.

Navigation Menu

Repository navigation

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

28 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

vorburger commented on Jul 27, 2013

jamie-pate commented on Sep 16, 2013

jamie-pate commented on Sep 16, 2013

jamie-pate commented on Dec 6, 2013

rmourato commented on Jan 8, 2014

IgorMinar commented on Jan 9, 2014

rmourato commented on Jan 9, 2014

Deklin commented on Feb 19, 2014

Deklin commented on Feb 19, 2014

rwinzhang commented on Jun 1, 2014

robjames commented on Jun 2, 2014

jamie-pate commented on Jun 2, 2014

gkocjan commented on Jul 1, 2014

28 remaining items

adrianduke commented on Mar 19, 2015

idoo commented on Mar 19, 2015

gkalpak commented on Mar 20, 2015

petebacondarwin commented on Mar 20, 2015

petebacondarwin commented on Mar 20, 2015

piotrkulpinski commented on Mar 22, 2015

petebacondarwin commented on Mar 23, 2015

stewones commented on Jul 22, 2015

favio41 commented on Jun 6, 2016

gkalpak commented on Jun 6, 2016

User195 commented on Jan 25, 2019

andre719mv commented on Feb 20, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions