AngularJS form validation helps you to develop a modern HTML5 form that is interactive and responsive. AngularJS provides you built-in validation directives to validate form on client side. This makes your life pretty easy to handle client-side form validations without adding a lot of extra effort. AngularJS form validation are based on the HTML5 form validators.
AngularJS directives for form validation
Here is a list of angularjs directive which can be apply on a input field to validate it's value.
<input type="text"
ng-model="{ string }"
[name="{ string }"]
[ng-required="{ boolean }"]
[ng-minlength="{ number }"]
[ng-maxlength="{ number }"]
[ng-pattern="{ string }"]
[ng-change="{ string }"]>
</input>
The main advantage of using AngularJS form validation instead of HTML5 attributes based validation, is that AngularJS way allows to mantain the two way data binding between model and view.
Angular Form Properties
Angular provides properties on form which help you to get information about a form or it's inputs and to validate them.
$valid
It is a boolean property that tells whether the form or it's inputs are valid or not. If all containing form and controls are valid, then it will be true, otherwise it will be false.
Syntax
formName.$valid
formName.inputFieldName.$valid
$invalid
It is a boolean property that tells whether the form or it's inputs are invalid or not. If at least one containing form and control is invalid then it will be true, otherwise it will be false.
Syntax
formName.$invalid
formName.inputFieldName.$invalid
$pristine
It is a boolean property that tells whether the form or it's inputs are unmodified by the user or not. If the form or it's inputs are unmodified by the user, then it will be true, otherwise it will be false.
Syntax
formName.inputFieldName.$pristine
$dirty
It is a boolean property that is actually just reverse of pristine i.e. it tells whether the form or it's inputs are modified by the user or not. If the form or it's inputs are modified by the user, then it will be true, otherwise it will be false.
Syntax
formName.$dirty
formName.inputFieldName.$dirty
$error
This is an object hash which contains references to all invalid controls or forms. It has all errors as keys: where keys are validation tokens (such as required, url or email) and values are arrays of controls or forms that are invalid with given error. For a control, If a validation fails then it will be true, otherwise it will be false.
Syntax
formName.$error
formName.inputFieldName.$error
AngularJS Form Validation with Bootstrap
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<meta charset="utf-8">
<title>AngularJS Form Validation with BootStrap</title>
</head>
<body ng-app="app">
<div class="container" ng-controller="Ctrl">
<div class="col-sm-8 col-sm-offset-2">
<!-- PAGE HEADER -->
<div class="page-header"><h2>AngularJS Form Validation with Bootstrap</h2></div>
<!-- FORM : YOU CAN DISABLE, HTML5 VALIDATION BY USING "novalidate" ATTRIBUTE-->
<form name="userForm" ng-submit="submitForm()" novalidate>
<!-- NAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && (userForm.name.$dirty || submitted)}">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="user.name" placeholder="Your Name" ng-required="true">
<p ng-show="userForm.name.$error.required && (userForm.name.$dirty || submitted)" class="help-block">You name is required.</p>
</div>
<!-- USERNAME -->
<div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && (userForm.username.$dirty || submitted)}">
<label>Username</label>
<input type="text" name="username" class="form-control" ng-model="user.username" placeholder="Your Username" ng-minlength="3" ng-maxlength="8" ng-required="true">
<p ng-show="userForm.username.$error.required && (userForm.username.$dirty || submitted)" class="help-block">You username is required.</p>
<p ng-show="userForm.username.$error.minlength && (userForm.username.$dirty || submitted)" class="help-block">Username is too short.</p>
<p ng-show="userForm.username.$error.maxlength && (userForm.username.$dirty || submitted)" class="help-block">Username is too long.</p>
</div>
<!-- PASSWORD -->
<div class="form-group" ng-class="{ 'has-error' : userForm.password.$invalid && (userForm.password.$dirty || submitted)}">
<label>Password</label>
<input type="Password" name="password" class="form-control" ng-model="user.password" placeholder="Your Password" ng-required="true">
<p ng-show="userForm.password.$error.required && (userForm.password.$dirty || submitted)" class="help-block">Your password is required.</p>
</div>
<!-- CONFIRM PASSWORD -->
<div class="form-group" ng-class="{ 'has-error' : userForm.confirmPassword.$invalid && (userForm.confirmPassword.$dirty || submitted)}">
<label>Confirm Password</label>
<input type="Password" name="confirmPassword" class="form-control" ng-model="user.confirmPassword" placeholder="Confirm Your Password" ng-compare="password" ng-required="true">
<p ng-show="userForm.confirmPassword.$error.required && (userForm.confirmPassword.$dirty || submitted)" class="help-block">Your confirm password is required.</p>
<p ng-show="userForm.confirmPassword.$error.compare && (userForm.confirmPassword.$dirty || submitted)" class="help-block">Confirm password doesnot match.</p>
</div>
<!-- EMAIL -->
<div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && (userForm.email.$dirty || submitted)}">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="user.email" placeholder="Your Email Address" ng-required="true">
<p ng-show="userForm.email.$error.required && (userForm.email.$dirty || submitted)" class="help-block">Email is required.</p>
<p ng-show="userForm.email.$error.email && (userForm.email.$dirty || submitted)" class="help-block">Enter a valid email.</p>
</div>
<!-- CONTACTNO -->
<div class="form-group" ng-class="{ 'has-error' : userForm.contactno.$invalid && (userForm.contactno.$dirty || submitted) }">
<label>ContactNo</label>
<input type="text" name="contactno" class="form-control" ng-model="user.contactno" placeholder="Your Contact No" ng-pattern="/^[789]\d{9}$/" maxlength="10">
<p ng-show="userForm.contactno.$error.pattern && (userForm.contactno.$dirty || submitted)" class="help-block">Enter a valid contactno.</p>
</div>
<!-- COUNTRY -->
<div class="form-group" ng-class="{ 'has-error' : userForm.country.$invalid && (userForm.country.$dirty || submitted)}">
<label>Country</label>
<select name="country" class="form-control"
ng-model="user.country"
ng-options="country.CountryId as country.Name for country in countryList"
ng-required="true">
<option value=''>Select</option>
</select>
<p ng-show="userForm.country.$error.required && (userForm.country.$dirty || submitted)" class="help-block">Select country.</p>
</div>
<!-- CITY -->
<div class="form-group" ng-class="{ 'has-error' : userForm.city.$invalid && (userForm.city.$dirty || submitted)}">
<label>City</label>
<select name="city" class="form-control"
ng-model="user.city"
ng-options="city.CityId as city.Name for city in cityList"
ng-required="true">
<option value=''>Select</option>
</select>
<p ng-show="userForm.city.$error.required && (userForm.city.$dirty || submitted)" class="help-block">Select city.</p>
</div>
<!-- TERMS & CONDITIONS -->
<div class="form-group" ng-class="{ 'has-error' : userForm.terms.$invalid && (userForm.terms.$dirty || submitted)}">
<label>Accept Terms & Conditions</label>
<input type="checkbox" value="" name="terms" ng-model="user.terms" ng-required="true" />
<p ng-show="userForm.terms.$error.required && (userForm.terms.$dirty || submitted)" class="help-block">Accept terms & conditions.</p>
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
<br />
</body>
</html>
AngularJS Form Validation with Bootstrap
Select country.
Select city.
Accept terms & conditions.
No comments:
Post a Comment