How to set max and min value in angular js?

Question

I have the following markup:

<div class="input-group-icon">Max <span class="error">*</span>
<div class="input-group">
    <!--<input style="border-right:none;" name="available_funds_max" ng-model="attributes.available_funds_max"  max="{{constants.globalValue.availablemaxNumber}}" min="{{attributes.available_funds_min}}" type="number" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" required class="form-control input-sm m-bot15" />--> 
    <input style="border-right:none;" name="available_funds_max" ng-model="attributes.available_funds_max"  ng-maxlength="15"  ng-minlength="1"  type="text" required  class="form-control input-sm m-bot15"  format="number" ng-max="{{constants.globalValue.availablemaxNumber}}" ng-min="{{attributes.available_funds_min}}"/> 
    <span style="border-left:none; background:none; border-color:#e2e2e4; border-radius:0;" class="input-group-addon" id="basic-addon2">{{programname.country.currency_symbol?programname.country.currency_symbol:'$'}}</span> </div>
    <label for="available_funds_max" ng-show="submittab1 && attributesForm.available_funds_max.$error.required" class="error">{{formValidation.required}}</label> 
    <label for="available_funds_max" ng-show="submittab1 && attributesForm.available_funds_max.$error.min" class="error"> {{formValidation.minMax}} </label>
    <label for="available_funds_max" ng-show="submittab1 && attributesForm.available_funds_max.$error.max" class="error"> {{formValidation.anumberMin}} </label>
    <label for="available_funds_max" ng-show="submittab1 && attributesForm.available_funds_max.$error.number" class="error"> {{formValidation.errorNumber}} </label>
    <label for="available_funds_max" ng-show="submittab1 && attributesForm.available_funds_max.$error.maxlength" class="error">Max value too long</label>
    <label for="available_funds_max" ng-show="submittab1 && attributesForm.available_funds_max.$error.minlength" class="error">Max value too short</label>
    <label for="available_funds_max" ng-show="submittab1 && attributesForm.available_funds_min.$error.lowerThan" class="error">Value must be greater than min value</label>
</div>

I have set the max and min value in the <input type="text" />. How can I display a validation error when the max or min value has been entered?

I would like to validate the field with the min and max values, because I don't want to allow numbers in the billions, but only up to a certain maximum. How can I validate the input field and display a validation error message?

You can't just use "min" and "max" on "text" input. Use "number" input. — Ron Dadon
– Ron Dadon, Commented Jul 4, 2016 at 11:02
Here is the documentation with error messages: docs.angularjs.org/api/ng/input/input%5Btext%5D — user5524279
– user5524279, Commented Jul 4, 2016 at 11:03
But i want to check with min and max value in type="text" because am showing no in bilion number like 10,000,how to check When user enter greater than Max value and Min value show error validation? — Geetha Janarthanan
– Geetha Janarthanan, Commented Jul 4, 2016 at 11:06
@GeethaJanarthanan, take a look at my answer: stackoverflow.com/questions/38183075/… — developer033
– developer033, Commented Jul 4, 2016 at 13:05

developer033 · Accepted Answer · 2017-08-23 20:01:41Z

Here's a snippet working, just using ngMessages:

(function() {
  'use strict';

  angular.module('app', ['ngMessages'])
    .controller('mainCtrl', function($scope) {
      $scope.min = 5;
      $scope.max = 99;
    });
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.6.6/angular-messages.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <form name="form">
    <label for="input">Input field:</label>
    <input type="number" name="input" min="{{min}}" max="{{max}}" ng-model="input" required step="0.01" />
    <div ng-messages="form.input.$error" style="color: #ff0000" role="alert" ng-if="form.input.$dirty">
      <div ng-message="required">This field is required</div>
      <div ng-message="min">This field must be at least {{min}}.</div>
      <div ng-message="max">This field must be at max {{max}}.</div>
      <div ng-message="number">Not a valid number.</div>
    </div>
  </form>
</body>

</html>

Marcus Höglund · Accepted Answer · 2016-07-04 11:16:16Z

1

If you want to set the max and min value on a text input you can use ng-minlength and ng-maxlength. Wrap your inputs inside a form and call the $valid on the forms input values to see if the inputs are valid.

It can be used like this:

<form name="myForm">
    <label>
       User name:
       <input type="text" name="userName" ng-model="name" required ng-minlength="1" ng-maxlength="4">
    </label>
    <div role="alert">
      <span class="error" ng-show="!myForm.userName.$valid">
       Required!</span>
    </div>
</form>

The span will only show when the input with name userName is invalid. Here's a plunker

answered Jul 4, 2016 at 11:16

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

3 Comments

Geetha Janarthanan Over a year ago

Am set max and min value in text box ? is there any option to set min and max value type="text" in angular js?

Marcus Höglund Over a year ago

@GeethaJanarthanan Am set max and min value in text box ? What do you mean here? If you have a input of type="text" you can use ng-minlength and ng-maxlength, That's a angularjs way of setting it. You can use ng-minlength and ng-maxlength on more type of inputs as well.

Geetha Janarthanan Over a year ago

i want to Check value in textbox , suppose in min ="5" max="20,000",so user can't enter max value 20,001 and min 4 value once he enter that value i ll show error message.like type="number" we set min and max value same functionality i want to check in type="text"

Dharmarajan · Accepted Answer · 2018-04-09 12:28:49Z

1

Set min value. It should be numeric
<input type="text" ng-model="bundle.quantity" name="quantity" class="form-control text-right" placeholder="" ng-min="1" required>
If the attribute value is numeric then It will display otherwise it will remove from the DOM and make it form as invalid. Simply It will not allow the invalid values

app.directive('ngMin', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attr, ctrl) {
            scope.$watch(attr.ngMin, function() {
                ctrl.$setViewValue(ctrl.$viewValue);
            });
            var minValidator = function(value) {
                var min = attr.ngMin || 0;
                if (!isEmpty(value) && value < min) {
                    ctrl.$setValidity('ngMin', false);
                    return undefined;
                } else {
                    ctrl.$setValidity('ngMin', true);
                    return value;
                }
            };
            ctrl.$parsers.push(minValidator);
            ctrl.$formatters.push(minValidator);
        }
    };
});

edited Apr 9, 2018 at 12:28

answered Apr 9, 2018 at 11:24

Dharmarajan

1292 silver badges13 bronze badges

2 Comments

Sivaprasanna Sethuraman Over a year ago

A short description on what the code does or how it fixes the actual question would be good.

nuander Over a year ago

now we have validators. don't have to use parsers and formatters for this. ctrl.$validators = etc

thepio · Accepted Answer · 2016-07-04 13:21:22Z

I would recommend using Angular ngMessages directive. Then you can group up your error messages like this and it's really easy to use:

var app = angular.module('app', ['ngMessages']);

div[role="alert"] {
  margin: 10px 0;
}

<html>
<head></head>
<body ng-app="app">
  <form name="demoForm">
    <label for="myField">Text field:</label><br>
    <input type="text"
           name="myField"
           ng-model="field"
           ng-minlength="5"
           ng-maxlength="20"
           required />
    <div ng-messages="demoForm.myField.$error" role="alert">
      <div ng-message="required">This field is required</div>
      <div ng-message="minlength">This field should be at least 5 characters long</div>
      <div ng-message="maxlength">This field should be less than 20 characters long</div>
    </div>
    <label for="myField2">Number field:</label><br>
    <input type="number"
           name="myField2"
           ng-model="field2"
           ng-minlength="5"
           ng-maxlength="20"
           required />
    <div ng-messages="demoForm.myField2.$error" role="alert">
      <div ng-message="required">This field is required</div>
      <div ng-message="minlength">This field should be at least 5 characters long</div>
      <div ng-message="maxlength">This field should be less than 20 characters long</div>
    </div>
  </form>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-messages.min.js"></script>
</body>

Official documentation: https://docs.angularjs.org/api/ngMessages/directive/ngMessages

EDIT based on comments:

I think I now understood what it is that you want. Please see the following code snippet for an answer. I made custom directives for the min and max values that you can set and which will validate the input. There is also a pattern check on the input with ng-pattern which will allow numbers, commas and dots and show error accordingly (You could modify this to not allow to insert anything else than numbers and commas etc). Please modify this for your needs but I think this is a good starting point for you.

var app = angular.module('app', ['ngMessages']);

app.directive('customMin', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attr, ctrl) {
            var minValidator = function (value) {
                var min = scope.$eval(attr.customMin) || 0;
                if (value) {
                	value = value.replace(/[^0-9]/g, '');
                }
                console.log(value);
                if (!isEmpty(value) && value < min) {
                    ctrl.$setValidity('customMin', false);
                    return undefined;
                } else {
                    ctrl.$setValidity('customMin', true);
                    return value;
                }
            };

            ctrl.$parsers.push(minValidator);
            ctrl.$formatters.push(minValidator);
        }
    };
});

app.directive('customMax', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attr, ctrl) {
            var maxValidator = function (value) {
                var max = scope.$eval(attr.customMax) || Infinity;
                if (value) {
                	value = value.replace(/[^0-9]/g, '');
                }
                console.log(value);
                if (!isEmpty(value) && value > max) {
                    ctrl.$setValidity('customMax', false);
                    return undefined;
                } else {
                    ctrl.$setValidity('customMax', true);
                    return value;
                }
            };

            ctrl.$parsers.push(maxValidator);
            ctrl.$formatters.push(maxValidator);
        }
    };
});

function isEmpty(value) {
    return angular.isUndefined(value) || value === '' || value === null || value !== value;
}

<html>
  <body>
    <div ng-app="app">
      <form name="myForm">
        Value:
        <input type="text" ng-model="value" ng-pattern="/[0-9]+([\.,][0-9]+)*/" custom-min="5" custom-max="20000" name="value" />
        <div ng-messages="myForm.value.$error" role="alert">
          <div ng-message="pattern">There are some characters that are not allowed</div>
          <div ng-message="customMin">This field should be at least value of 5</div>
          <div ng-message="customMax">This field should be at most value 20,000</div>
        </div>
        <br> 
        <tt>value = {{value}}</tt>
        <br>
        <tt>value.$valid = {{myForm.value.$valid}}</tt>
        <br>
        <tt>value.$error = {{myForm.value.$error}}</tt>
      </form>
    </div>
    <script src="https://code.angularjs.org/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.4.8/angular-messages.min.js"></script>
  </body>
</html>

Hmm ok, It's kind of hard to read the question but this solution should work either way. Please let me know if I understood something incorrectly.
Am Checking value in textbox , suppose in min ="5" max="20,000",so user can't enter max value 20,001 and min 4 value once he enter that value i ll show error message.
Hi, I made an edit on my answer which might be helpful. Please see the fiddle.
I modified it again to use ng-messages and made a code snippet of it in the answer. Please see if the edited answer is any use for you.

Collectives™ on Stack Overflow

How to set max and min value in angular js?

4 Answers 4

Comments

3 Comments

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related