Introduction To AngularJS: Form Validation

In this 20th day of AngularJS article series, we are going to be learning the next key players/concept of AngularJS, understanding the concept of Form Validation of AngularJS. Before moving to key players/concepts of AngularJS, please read my previous articles:

Form Validation

AngularJS provides the client-side validation for input fields as well as forms. It also provides the information about whether the input field is modified or not etc. Following are some properties of input fields as well as forms:

$dirty

It returns true if user is interacted with form otherwise return false.
$invalid

It returns true if at least one input field or form is invalid otherwise return false.
$valid

It returns true if form and input fields is valid otherwise return false.
$pristine

It returns true if user is not interacted with the form yet otherwise return false.
$pending

It returns true if one of control or form is pending otherwise return false.
$submitted

It returns true if user submitted the form that is invalid otherwise return false.
$error

It contains references to controls or forms with failing validators.

Built-in validation tokens:

email
max
min
maxlength
minlength
number
pattern
required
date
time
etc.

Example:

In the following example we just created form tag with five input controls – Name, Email, Company Name, Designation and City. We set the compulsory validation for minlength and required every control, and we used AngularJS form validation.

app.js

/// <reference path="angular.min.js" />
var app = angular.module("myApp", []);
//Creating controller & injecteing $http service in controller
app.controller("myController", function ($scope, $http) {
$scope.update = false;
$scope.init = function () {
$scope.temp = {
id: 1,
name: 'Jeetendra Gund',
email: '[email protected]',
companyName: 'GNS',
designation: 'Senior Analyst',
city: 'Pune'
};
};
//Add Employee
$scope.addEmployee = function () {
};
$scope.getError = function (error, name) {
if (angular.isDefined(error)) {
if (error.required && name == 'name') {
return "Please enter name";
} else if (error.email && name == 'email') {
return "Please enter valid email";
} else if (error.required && name == 'company_name') {
return "Please enter company name";
} else if (error.required && name == 'designation') {
return "Please enter designation";
} else if (error.required && name == 'email') {
return "Please enter email";
} else if (error.required && name == 'city') {
return "Please enter city";
} else if (error.minlength && name == 'name') {
return "Name must be 3 characters long";
} else if (error.minlength && name == 'company_name') {
return "Company name must be 3 characters long";
} else if (error.minlength && name == 'designation') {
return "Designation must be 3 characters long";
} else if (error.minlength && name == 'city') {
return "City must be 4 characters long";
}
}
}
});

In the above app.js file contains only two function first for initialization purpose and second addEmployee and third is for getting error messages from controller.

index.html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Welcome to C# Corner</title>
<meta charset="utf-8" />
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/angular.min.js"></script>
<script src="app/app.js"></script>
</head>
<body ng-controller="myController" ng-init="init()">
<div class="container">
<h3 class="text-center">Form Validation of AngularJS</h3>
<div class="row mt80">
<div class="col-md-4"></div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 animated fadeInDown">
<form novalidate name="empForm">
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input data-ng-minlength="3" required type="text" class="form-control" id="name" name="name" placeholder="Name" ng-model='temp.name'>
<span class="help-block error" data-ng-show="empForm.name.$invalid && empForm.name.$dirty">
{{getError(empForm.name.$error, 'name')}}
</span>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input data-ng-minlength="3" required type="email" class="form-control" id="email" name="email" placeholder="Email" ng-model='temp.email'>
<span class="help-block error" data-ng-show="empForm.email.$invalid && empForm.email.$dirty">
{{getError(empForm.email.$error, 'email')}}
</span>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Company Name</label>
<input data-ng-minlength="3" required type="text" class="form-control" id="company_name" name="company_name" placeholder="Company Name" ng-model='temp.companyName'>
<span class="help-block error" data-ng-show="empForm.company_name.$invalid && empForm.company_name.$dirty">
{{getError(empForm.company_name.$error, 'company_name')}}
</span>
</div>
<div class="form-group">
<label for="exampleInputFile">Designation</label>
<input data-ng-minlength="3" required type="text" class="form-control" id="designation" name="designation" placeholder="Designation" ng-model='temp.designation'>
<span class="help-block error" data-ng-show="empForm.designation.$invalid && empForm.designation.$dirty">
{{getError(empForm.designation.$error, 'designation')}}
</span>
</div>
<div class="form-group">
<label for="exampleInputFile">City</label>
<input data-ng-minlength="4" required type="text" class="form-control" id="city" name="city" placeholder="City" ng-model='temp.city'>
<span class="help-block error" data-ng-show="empForm.city.$invalid && empForm.city.$dirty">
{{getError(empForm.city.$error, 'city')}}
</span>
</div>
<div class="text-center">
<input type="button" ng-disabled="empForm.name.$dirty && empForm.name.$invalid || empForm.email.$dirty && empForm.email.$invalid ||
empForm.company_name.$dirty && empForm.company_name.$invalid || empForm.designation.$dirty && empForm.designation.$invalid" loading-text="Saving Employee..." class="btn btn-save" ng-click="addEmployee()" value="Save">
</div>
</form>
</div>
</div>
</div>
</body>
</html>

Output:

One the .html file in browser you can see output with default values as follows:

output

Now, just remove the ‘Company Name’ value and you can see error message as well as ‘Save’ button is disabled as follows:

output

This message contains for the required field, now following for the minlength as follows:

output

Now, see following output for all error messages as follows:

output

Great, Form Validation in AngularJS with example created successfully.

Summary

I hope that beginners as well as students understand concept of Form Validation in AngularJS with examples. If you have any suggestion regarding this article, then please contact me. Stay tuned for other concepts of AngularJS coming soon!

Thanks for reading. Learn it! Share it!