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"/>
How to show error messages for min and max values of an input field with number type?
Viewed 23643
6 Answers
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>.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>
Related