var app = angular.module('app', []); app.controller('appCtrl', function ($scope) { });
input.ng-invalid.ng-dirty { border-color: red; color: red; } input.ng-valid.ng-dirty { border-color: green; color: green; }
<section ng-app="app"> <article ng-controller="appCtrl" class="well"> <form class="form-horizontal" name="appForm" novalidate> <div class="form-group"> <label class="col-sm-2 control-label">Number (min - 5; max - 20;) <span class="label label-danger" ng-show="appForm.number.$invalid && appForm.number.$dirty">hover to show errors</span> </label> <div class="col-sm-10"> <input type="number" min="5" max="20" ng-model="number" name="number" class="form-control" required /> </div> </div> <div class="alert alert-danger" ng-show="appForm.number.$invalid && appForm.number.$dirty"> <ul> <li ng-show="appForm.number.$error.required">this field is required</li> <li ng-show="appForm.number.$error.number">should be number</li> <li ng-show="appForm.number.$error.min">minimum - 5</li> <li ng-show="appForm.number.$error.max">miximum - 20</li> </ul> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button ng-click="submit()" ng-disabled="appForm.$invalid" class="btn btn-primary">submit</button> </div> </div> </form> </article> </section>