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

Question

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"/> 

Answer 1

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>