How do I limit an input's value with javascript?

Question

I need an input value to be limited to [1, 5000000]. I want to do it programmatically. I am using AngularJS for my web application. Here is the code I wrote:

html

<input ng-change="checkLimit()" type="number" min="1" max="5000000" name="input" ng-model="data.flips" required/>

js

angular.module("app", []).controller("controller", function($scope) {
    $scope.checkLimit = function() {
        $scope.data.flips = $scope.data.flips > 5000000 ? 5000000 : 
        $scope.data.flips;
        $scope.data.flips = $scope.data.flips < 1 ? 1 : $scope.data.flips;
    }
});

I know for sure that the function runs, but the value in the input field and the variable is not updated. I am relatively new to Angular, so there is probably some elementary concept that I am missing.

Have you debugged the script to see what the value of $scope.data.flips is? — Patrick Roberts
– Patrick Roberts, Commented Jul 13, 2017 at 0:17

cccross · Accepted Answer · 2017-07-13 01:11:07Z

1

You need to remove min and max attributes, due to this validation does not allow to change the ng-model.

Alternative if you want to maintain the min and max you can add ng-model-options like this:

<input ng-change="checkLimit()" type="number" min="1" max="5000000" name="input" ng-model="data.flips" required
                           ng-model-options="{ allowInvalid: true, updateOn: 'blur' }"/>

Note that we are using ng-model-options, thus we have to use the appropriate angular version >=1.4

edited Jul 13, 2017 at 1:11

answered Jul 13, 2017 at 0:46

cccross

767 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cccross Over a year ago

JIC: It updates the data on blur event in the input. if you want it to update right away, remove the updateOn: 'blur' from the ng-model-options. But I guess it is user friendly with the onblur.

programming for fun · Accepted Answer · 2017-07-13 01:13:38Z

1

Edit: see cccross' answer for a cleaner version

~~You need to escape the current digest cycle, as I don't believe that angular will update an element with a new property value if the property value was updated in a change event from that element.~~

There may be cleaner ways to do what you request; however, this example works. I removed the 'min' and 'max' input attributes, and moved your ng-change listener logic into a '$timeout' call. $timeout is included as a controller argument. $timeout will trigger another digest cycle, which will update your input.

angular.module("app", []).controller("controller", function($scope, $timeout) {
    $scope.checkLimit = function() {
        $timeout(() => {
            $scope.data.flips = $scope.data.flips > 5000000 ? 5000000 : 
            $scope.data.flips;
            $scope.data.flips = $scope.data.flips < 1 ? 1 : $scope.data.flips;
        })
    }
});

fiddle

edited Jul 13, 2017 at 1:13

answered Jul 13, 2017 at 0:37

programming for fun

1981 silver badge5 bronze badges

10 Comments

cccross Over a year ago

See my answer for a cleaner solution

programming for fun Over a year ago

I don't think your answer is correct - your answer fails to update the value displayed in the input element. jsfiddle.net/xaxwaudv/4

cccross Over a year ago

It works. It updates the data on blur event in the input. if you want it to update right away, remove the updateOn: 'blur' from the ng-model-options. But I guess it is user friendly with the onblur.

programming for fun Over a year ago

I could have created a bad example, but I don't see what I think is your answer working at this fiddle: jsfiddle.net/xaxwaudv/5

programming for fun Over a year ago

wrong fiddle link. here's the correct link: jsfiddle.net/xaxwaudv/5

|

Collectives™ on Stack Overflow

How do I limit an input's value with javascript?

2 Answers 2

1 Comment

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related