How to show error messages for min and max values of an input field with number type?

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> 

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>

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> 

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> 

.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>