Angular Form Validation Example and Demo

Validation is a very important feature of form submission, How to validate angular form? Angularjs has inbuilt client-side form validation features which have all common input validations. You can also use HTML5 attribute to validate form input fields.

Angular monitors the state of the HTML input fields (input, textarea, select) and whether they have been touched, or modified, or not.

I will use ngMessage directive to show error message on the time form element validation. ngMessages is a angular directive that is designed to show and hide messages based on the state of a key/value object. The ngMessage itself complements error message reporting with the ngModel $error object.

I will cover following Angularjs validation:

• The required input fields.
• The minimum size length input field validation.
• The maximum size length input field validation.
• The email field validation.
• User availability exist validation.

Angular Form Validation Using ngMessage

We will create simple bootstrap form and add angular js validation attribute into module.We will show error message one at a time, You can show multiple message using ngMessage.

We will create 'angularjs-validation-example' folder.I will create app.js and index.html file.

Step 1: We will add required libs and css files into head section of index.html file.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
 	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-messages.js"></script>
<script src="app.js"></script>

Step 2: We will create bootstrap HTML form into index.html file.

<form name="validate_form" novalidate="">
<div class="clearfix">
<table class="table table-bordered table-hover"><colgroup> <col width=""> <col width="50%"> </colgroup>
<tbody>
<tr>
<td>What is the name ?<sup class="sup-color">*</sup></td>
<td>
<div class="form-group"><input id="user_name" class="form-control" name="user_name" required="" type="text"></div>
<div class="help-block alert-danger">Name is required. Your name is too short. Your name is too long. Name already exists.</div>
</td>
</tr>
<tr>
<td>What is email Id? <sup class="sup-color">*</sup></td>
<td>
<div class="form-group"><input class="form-control" name="email_id" required="" type="email" placeholder="Enter Email Id"></div>
<div class="help-block alert-danger">Your email is required. This needs to be a valid email</div>
</td>
</tr>
<tr>
<td>Select the Gender ? <sup class="sup-color">*</sup></td>
<td>
<div class="form-group"><select id="gender_inpt" class="form-control" name="gender_inpt" required="">
<option value="{{option}}">{{option}}</option>
</select>Required</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>

We have created HTML form and added id "validate_form". We will use this id with angular validation like below.
validate_form.gender_inpt.$touched

where:

validate_form : The html form name.
gender_inpt : The HTML input element name.
touched : Validate element on focus out event.

We will use ngMessage with angularjs validation as like follows,

<div class="help-block alert-danger">Name is required. Your name is too short. Your name is too long. Name already exists.</div>

Step 3: We will add some angular code into app.js file.

<div class="help-block alert-danger" ng-messages="validate_form.user_name.$error" ng-if="validate_form.user_name.$touched">
	
Name is required.
	
Your name is too short.
	
Your name is too long.
	
Name already exists.
</div>

</pre>
<strong>Step 3:</strong> We will add some angular code into <code>app.js</code> file.
<pre>(function(window, angular, undefined){
	'use strict';
	angular.module('TestApp', [
      'ngMessages'
	]);
	angular.module('TestApp').controller('testController', testController);
	function testController($scope){
		$scope.gender_type = ['male', 'female'];
		$scope.names = ['adam', 'test', 'john'];
		$scope.gender = '';

		$scope.checkExist =  function(name) {
			if($scope.names.includes(name)) {
				console.log(name);
				$scope.validate_form.user_name.$setValidity('unique', false);
			} else {
				$scope.validate_form.user_name.$setValidity('unique', true);
			}
		}
	}

})(window, window.angular);

You can download source code and Demo from below link.

Conclusion:

You can use other third party angular validation as well.I am using ngMessage directive to display message but you can also display validation message without ngMessage.