Validation Using Angular form Validator and Ng Messages
HTML
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-messages/1.5.7/angular-messages.js"></script>
<body ng-app="myApp" ng-controller="myCtrl as vm">
<div class="container">
<div class="page-header">
<h3>Validator Examples</h3>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2">
<div class="page-header">
<h5><b>ngForm Validator Examples</b></h5>
</div>
<form name="formOne" novalidate>
<div class="form-group">
<input type="text" class="form-control" name="name1" placeholder="Name" required ng-model="vm.formOne.name"
minlength="5" maxlength="10" />
<div ng-show="formOne.$submitted || formOne.name1.$touched">
<div ng-show="formOne.name1.$error.required" class="form-error">Name can't be empty</div>
<div ng-show="formOne.name1.$error.minlength" class="form-error">Name can't be less than 5</div>
<div ng-show="formOne.name1.$error.maxlength" class="form-error">Name can't be more than 10</div>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" name="address1" placeholder="Address" ng-model="vm.formOne.address"
required />
<div ng-show="formOne.$submitted || formOne.address1.$touched">
<div ng-show="formOne.address1.$error.required" class="form-error">Address can't be empty</div>
</div>
</div>
<div class="form-group">
<input type="number" class="form-control" name="age1" placeholder="Age" ng-model="vm.formOne.age"
required number/>
<div ng-show="formOne.$submitted ||...
CSS
.form-error{
color : red;
}
JavaScript
angular.module("myApp",['ngMessages']);
angular.module("myApp").controller("myCtrl",myCtrl);
function myCtrl(){
var vm = this;
vm.formOne = {}
vm.formOne.name = "";
vm.formOne.address = "";
vm.formOne.age = 0;
vm.formTwo = {}
vm.formTwo.name = "";
vm.formTwo.address = "";
vm.formTwo.age = 0;
}