Angular JS Tutorial
Tags
wpf C# interview reflection mvvm mvvm light interface generics arraylist hashtable using design patterns visitor template flyweight strategy memento mediator command wcf instance management application architecture ajax angularjs forms validations nested forms filters controllers directives bindings expressions ng-app ng-model environment setup threading synchronization rhino mocks test doubles oops app android linq testing nunit testcase typescript javascript abstract nodejs mysql CRUD dotnetcore mvc ftp python chmod linux golang variables uuid validator ExpressJS postgresql datatypes

Validations - AngularJS

Javascript Frameworks AngularJS application angularjs validations

AngularJS provides great support for implemeting validations in Forms.

Validation is performed by States properties and Validators directives.

There are four States in AngularJS Forms.

  1. $invalid : This state describes that form is in invalid state.
  2. $valid : This state describes that form is in valid state.
  3. $dirty :This state describes that form is in dirty state means any one input control value has changed by user.
  4. $error : This is a javascript object whose properties 'required', 'minlength', 'maxlength' has been set to true when any matching validation is true.

There are main four AngularJS Validators directives.

  1. ng-required : Set input control required and set the 'required' attribute of $error if input control is empty.
  2. ng-minlength : Set minimum length of input field and set the 'minlength' attribute of $error to true if input control does not satisfy the ng-minlength validation.
  3. ng-maxlength : Set maximum length of input field and set the 'maxlength' attribute of $error to true if input control does not satisfy the ng-maxlength validation.
  4. ng-pattern : Match the reqular expression and set the 'pattern' attribute of $error to true if input control does not satisfy the ng-pattern validation.

In addition we used three additional directives:

  • ng-model : Bind input controls to AngularJS controller objects.
  • ng-disabled : Disabled the associated element while condition is satisfied.
  • ng-show : Show the associated element while condition is satisfied else hide the element.

AngularJS Form Validation Example


<html>
<head>
<title>AngularJS Form Validation Example</title>
</head>
<body ng-app="testApp" ng-controller="mainCtrl">
	<form name="myForm" ng-submit="submit()" >
		<p>
			Enter First Name: <input name="firstName" type="textbox" ng-model="user.firstName" ng-required="true" ng-minlength="4" ng-maxlength="8" />
			<span ng-show="myForm.firstName.$error.required">
				Please enter firstName
			</span>
			<span ng-show="myForm.firstName.$error.minlength">
				Please enter minimum characters to 4
			</span>
			<span ng-show="myForm.firstName.$error.maxlength">
				Please enter maximum characters to 8
			</span>
		</p>
		<p>
			Enter Email: <input name="email" type="textbox" ng-model="user.email" ng-required="true" ng-pattern="/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/" />
			<span ng-show="myForm.email.$error.required">
				Email is required.
			</span>
			<span ng-show="myForm.email.$error.pattern">
				Invalid email format
			</span>
		</p>
		<p>
			<input type="submit" value="Submit" ng-disabled="myForm.$invalid" />
		</p>
	</form>
	
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js" ></script>
<script>
	var app = angular.module('testApp', []);
	
	app.controller('mainCtrl', ['$scope', function($scope){
		$scope.user = { firstName: '', email: ''};
		
		$scope.submit = function()
		{
			console.log('FirstName: ' + $scope.user.firstName);
			console.log('Email: ' + $scope.user.email);
		};
	}]);
</script>
</body>
</html>

Result:

AngularJS_Forms_Validation_Example_1

AngularJS_Forms_Validation_Example_2

AngularJS_Forms_Validation_Example_3

  • Line 9 defines an input control which has ng-model, ng-required, ng-minlength, ng-maxlength directives.
  • Line 10,13,16 defines a ng-show directives which only visible when its associated bind property is set to true.
  • Line 11, 14, 17 shows error messages which only visible when ng-show directive is set to true.
  • Line 21 shows an example of ng-pattern directive which validate the input control for valid email.
  • LIne 22, 25 span will only be visible when bind properties is set to true.
  • Line 30 defines an input submit button with ng-disabled directive which disable the submit button until the form is in valid state.
  • Line 36 to 46 defines an angular app and controller which show the user information in console when user submit the form.

Previous
Next