How to change input value to max value if it reaches the {max} AngularJS

Question

I have a form it includes input field which you can enter the amount of money. It has max attr. and if user entered amount of money greater than the max value I would like to set the ng-model parameter value to set max value which is the response of a RESTFull API.

Directly assigned the JSON object value to max attribute. The max value is typed in string as a response of API.

I used currency filters while assigning of the attribute values.

How to set max attribute value to ngModel object's value? If user enters the greater value than max value? Is there a way to change it immidiately and update the input field at the same time?

Also please tell me, If I'm using filters true? or NOT?

<input type="text" name="payableamount" class="form-control input-lg"
                       min="{{amount | currency:'':2}}"
                       max="{{billObj.amount | currency:'':2}}"
                       ng-model="form.bidAmount"
                       ng-required="true" ui-number-mask>

use ng-keyup docs.angularjs.org/api/ng/directive/ngKeyup and add your logic — Gopinath Shiva
– Gopinath Shiva, Commented Aug 3, 2016 at 9:09

Gopinath Shiva · Accepted Answer · 2016-08-03 09:38:13Z

1

Store the value of maxAmount which you got from API and validate it inside the 'checkAmount' function

1.Using ngKeyup:

//html    
<input ng-model="amount" ng-keyup="checkAmount($event,amount)"/>

//js
function MyCtrl($scope, $log) {

    $scope.checkAmount = function(e,amt) {
      if(amt>10){ //assuming maxAmount is 10
          $scope.amount = 10;
          e.preventDefault();
        }
    };
}

2. Using Directive,

<input check-max ng-model="amount"/>


myApp.directive('checkMax', function() {
    return {
    restrict: 'AE', //attribute or element,
    require: 'ngModel',
    link:function(s,e,a,ngModel){
        e.bind('keyup',function(event){
        if(ngModel.$modelValue>10){
          event.preventDefault();
          ngModel.$setViewValue(10);
          ngModel.$render();
        }
      });
    }
  };
});

Fiddle (using ng-keyup) : http://jsfiddle.net/r74a5m25/202/

Fiddle (using directive) : http://jsfiddle.net/r74a5m25/203/

edited Aug 3, 2016 at 9:38

answered Aug 3, 2016 at 9:18

Gopinath Shiva

3,8905 gold badges30 silver badges50 bronze badges

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

6 Comments

Girdhari Agrawal Over a year ago

what if we create an directive for that?

Gopinath Shiva Over a year ago

Yes you could do that in case you need the same logic in many places.

Gopinath Shiva Over a year ago

Added the solution using directive ;)

H.S. Bilgen Over a year ago

Thank you @GopinathShiva that works for me. I was curious about string value but you can change it to amt > '10' also works. Thanks!

Gopinath Shiva Over a year ago

Cool. Comparing numbers in a 'string' datatype though works is not a good practise. Convert them into numbers using parseInt or with '+' operator. Happy coding :)

|

Collectives™ on Stack Overflow

How to change input value to max value if it reaches the {max} AngularJS

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related