AngularJS ng-pattern Validation (Email) with Regular Expressions

Here we will learn what is ng-pattern directive in angularjs, how to use ng-pattern to validate form controls in angularjs, implement number, email validations with ng-pattern using regular expressions in angularjs applications with example

AngularJS ng-pattern Directive

In angularjs ng-pattern is used to validate input text controls with the help of regular expressions. The ng-pattern directive returns true if input text is validated as per expression otherwise it returns false.

 

For example validating email id with ng-pattern using regular expression or validation to allow only numbers with ng-pattern using regular expression. 

Syntax of AngularJS ng-pattern Validation

Following is the syntax of using ng-pattern directive with input text control to check entered text matching with regular expression or not in angularjs applications.

 

<form name="personForm">

Pin Code:<input type="text" name="pincode" ng-model="txtpin" ng-pattern="/^[0-9]{1,5}$/" />

<span style="color:Red" ng-show="personForm.pincode.$error.pattern">Only Numbers Allowed, Maximum 5 Characters</span>

</form>

We will see how to use ng-pattern in angularjs applications to validate input text with regular expressions with example.

AngularJS Number Validation with ng-pattern Example

Following is the example of validating form input control with ng-pattern property in angularjs. Here we will check whether user entered number and prevent form submission if validation fail for ng-pattern in angularjs application.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs ng-pattern Form Validation Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var app = angular.module('ngpatternApp', []);

app.controller('ngpatternCtrl', function ($scope) {

$scope.sendForm = function () {

$scope.msg = "Form Validated";

};

});

</script>

</head>

<body>

<div ng-app="ngpatternApp" ng-controller="ngpatternCtrl">

<h3>AngularJs ng-pattern Form Validation Example</h3>

<form name="personForm" novalidate ng-submit="personForm.$valid &&sendForm()">

Pin Code:<input type="text" name="pincode" ng-model="txtpin" ng-pattern="/^[0-9]{1,5}$/" required />

<span style="color:Red" ng-show="personForm.pincode.$error.required"> Required! </span>

<span style="color:Red" ng-show="personForm.pincode.$dirty&&personForm.pincode.$error.pattern">Only Numbers Allowed, Maximum 5 Characters</span>

<br /><br />

<button type="submit">Submit Form</button><br /><br />

<span>{{msg}}</span>

</form>

</div>

</body>

</html>

If you observe above code we are validating textbox control using ng-pattern property with regular expression. Here we will check whether user entered number or not and check how many characters entered in textbox based on that validation result we will prevent form submission in angularjs.

 

We used other properties like $dirty, pattern for form validations. If you want to know more about these properties check this url form validations in angularjs.

Output of AngularJS ng-pattern for Number Validation

Following is the result of using ng-pattern property to validate form input text control for number with regular expression in angularjs applications.

 

Angularjs number validation with ng-pattern directive example result or output

AngularJS Email Validation with ng-pattern Example

Following is the example of validating input text whether is it in email format or not using ng-pattern directive in angularjs applications.

 

Live Preview

<!DOCTYPE html>

<html>

<head>

<title>

AngularJs ng-pattern Email Validation Example

</title>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

var app = angular.module('ngpatternApp', []);

app.controller('ngpatternCtrl', function ($scope) {

$scope.sendForm = function () {

$scope.msg = "Form Validated";

};

});

</script>

</head>

<body>

<div ng-app="ngpatternApp" ng-controller="ngpatternCtrl">

<h3>AngularJs ng-pattern Email Validation Example</h3>

<form name="personForm" novalidate ng-submit="personForm.$valid &&sendForm()">

Email:<input type="text" name="email" ng-model="txtmail" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" required />

<span style="color:Red" ng-show="personForm.email.$error.required"> Required! </span>

<span style="color:Red" ng-show="personForm.email.$dirty&&personForm.email.$error.pattern">Please Enter Valid Email</span>

<br /><br />

<button type="submit">Submit Form</button><br /><br />

<span>{{msg}}</span>

</form>

</div>

</body>

</html>

If you observe above example we are validating textbox control text for email format using ng-pattern directive with regular expression. Now we will run and see the output of above example.

Output of AngularJS Email Validation with ng-pattern Example

Following is the result of implementing email validation in angularjs applications using ng-pattern directive.

 

Angularjs email validations using ng-pattern directive example output or result

This is how we can use ng-pattern directive in angularjs to implement validations like email, number, etc with regular expressions.