7

How do I set/show error messages for min and max values that I set on an input field with number type using angular js. 

<input type="number" min="0.1" max="30"/>
Harish
  • 1,193
  • 6
  • 22
  • 45

6 Answers6

10

Please use below code to show error message for min and max value in number input type field using angularjs validation.

For ng-maxlength and ng-minlength for Number input type field.

<form name="myForm">
    <input type="number" name="count" ng-model="count" max="30" min="0.1">
    <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
        <span ng-show="myForm.user.$error.min">Count should be above 0.1.</span>
        <span ng-show="myForm.user.$error.max">Count should be below 30.</span>
    </span>
</form>

For maxlength and minlength for Text input type field.

<form name="myForm">
    <input type="text" name="username" ng-model="username" ng-minlength="5" ng-maxlength="15">
    <span style="color:red" ng-show="myForm.username.$dirty && myForm.user.$invalid">
        <span ng-show="myForm.username.$error.minlength">Username should be minimum 5 character.</span>
        <span ng-show="myForm.username.$error.maxlength">Username should be maximum 15 character.</span>
    </span>
</form>
Random
  • 3,158
  • 1
  • 15
  • 25
Faizal
  • 250
  • 1
  • 8
  • Can I use the same technique on minlength and maxlength? – Harish May 16 '17 at 06:48
  • 1
    @Harish - Maxlength and minlength should be used for text length, not for number type field. Use below code for maxlength and minlength for text type input field. – Faizal May 16 '17 at 06:55
3

You need to encapsulate the input inside the form and conditionally display the error messages:

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

app.controller('test', function($scope) {
  $scope.model = {};
});
.error {
  color: red;
}

input {
  width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="test">
  <form novalidate name="myForm">
    <label for="model.data">Enter Data:</label>
    <input type="number" name="data" ng-model="model.data" min="0.1" max="30" />
    <div class="error" ng-show="myForm.data.$dirty && myForm.data.$error.min" ng-message="min">Unexpected minimum data</div>
    <div class="error" ng-show="myForm.data.$dirty && myForm.data.$error.max" ng-message="max">Unexpected maximum data</div>
  </form>
</div>
Shashank
  • 2,010
  • 2
  • 18
  • 38
1

Simple :

 <p class="help-block" ng-message="min || max">please enter in between 0.1 to 30.</p>

or 

<p class="help-block" ng-message="min">Min 0.1 required</p>
<p class="help-block" ng-message="max">Max 30 Allowd</p>
Jenny
  • 663
  • 4
  • 8
0

Add required to input field.

here is SAMPLE CODE and fiddle.

https://jsfiddle.net/nc4n61bk/

<form>

<input type="number" min="0.1" max="30" required/> 
<input type="submit"/>
</form>
3bu1
  • 977
  • 12
  • 30
0

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

app.controller('test', function($scope) {
  $scope.model = {};
});
.error {
  color: red;
}

input {
  width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="test">
  <form novalidate name="myForm">
    <label for="model.data">Enter Data:</label>
    <input type="number" name="data" ng-model="model.data" min="0.1" max="30" />
    <div class="error" ng-show="myForm.data.$dirty && myForm.data.$error.min" ng-message="min">Unexpected minimum data</div>
    <div class="error" ng-show="myForm.data.$dirty && myForm.data.$error.max" ng-message="max">Unexpected maximum data</div>
  </form>
</div>
Dev
  • 11
  • 2
  • Welcome to SO! Providing code without explanation is generally considered low quality. Could you provide some explanation as to why your answer works? – Collin Barrett Oct 29 '18 at 20:33
0
.valueError{
   color: rgb(255, 0, 0);
   padding-top: 5px;
}   

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="test">
 <form novalidate name="myForm">
<div class="form-field required-field">
<label for="field-value">Value</label>
<input type="number" id="field-value" name="valueInput" class="small form-control input-md ng-valid ng-dirty" ng-model="value" min="5" placeholder="Value"/>
<div class="valueError" ng-show="form.value.$dirty && form.value.$error.min "> Value must be atleast 5min</div>
</div>
 </form>
</div>
Dev
  • 11
  • 2