We can make very interactive UI validation with help of Bootstrap in AngularJs Framework. Here I will show one simple validation example with bootstrap in angularJs.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="../Scripts/angular.js"></script>
<link href="../Style/bootstrap.css" rel="stylesheet" />
<script>
var app = angular.module("MyApp", []);
app.controller("User", function ($scope) {
$scope.error = function (name) {
var s = $scope.form[name];
return s.$invalid && s.$dirty ? "error" : "";
};
});
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="User">
<br />
<form name="form" ng-submit="submit()" class="form-horizontal">
<div class="control-group" ng-class="error('FirstName')">
<label class="control-label" for="FirstName">FirstName</label>
<div class="controls">
<input id="FirstName" name="FirstName" type="text"
ng-model="User.FirstName" placeholder="FirstName" required />
<span class="help-block" ng-show="form.FirstName.$invalid && form.FirstName.$dirty">
First Name is required.
</span>
</div>
</div>
<div class="control-group" ng-class="error('LastName')">
<label class="control-label" for="LastName">LastName</label>
<div class="controls">
<input id="LastName" name="LastName" type="text"
ng-model="User.LastName" placeholder="LastName" required />
<span class="help-block" ng-show="form.LastName.$invalid && form.LastName.$dirty">
Last Name is required.
</span>
</div>
</div>
<div class="control-group" ng-class="error('Address')">
<label class="control-label" for="Address">Address</label>
<div class="controls">
<input id="Address" name="Address" type="text"
ng-model="User.Address" placeholder="Address" required />
<span class="help-block" ng-show="form.Address.$invalid && form.Address.$dirty">
Address is required.
</span>
</div>
</div>
<div class="control-group">
<div class="controls">
<button ng-disabled="form.$invalid" class="btn">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
Summary:
In this post we learnt that how to do validation with Bootstrap in angularJs
Chandradev's Blog 