AngularJS Email validation using Built-in Email Validator
You can customize form validations using Regular Expressions in AngularJS. I’ll explain about RegEx in my next example. First, let us see how you can use its Built-in validators or directives for validation.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<style>
.err {
font:13px Verdana;
color:Red;
}
</style>
</head>
<body>
<div ng-app="myApp"
ng-controller="myController">
<form name="form">
<input type="email" name="emailID"
ng-model="email"
placeholder="Enter an Email ID" />
<span class="err" ng-show="form.emailID.$error.email">
Not a valid Email
</span>
<p>
<input type="submit" ng-disabled="form.$invalid || !email" />
</p>
<p>{{email}}</p>
</form>
</div>
</body>
<script>
angular.module("myApp", [])
.controller('myController', ['$scope', function ($scope) {
} ]);
</script>
</html>I only have one Input box of type email in my form (above example). The model will update the expression, only when you enter a valid email id.
However, I also have a submit button, which I need to enable only when the user enters a valid email id. To do this I’ll have use AngularJS built-in directives such as,
• ng-show
• ng-disabled
The directive ng-show has the value form.emailID.$error.email. It’s a kind of error handler. It shows an error message inside the <span> element, until the user types a valid email id.
The directive ng-disabled has a value form.$invalid || !email. It enables or disables the submit button. This directive has two values separated by an OR (|| pipes), which means two different conditions.
The first condition (form.$invalid) checks if the entered email id is valid. The second condition (!email) checks if the user has entered any value in the box. Until then the button remains disabled.
In the above example, I am not doing any validations from my controller. Everything is in the Markup section or the view.
Now, let’s do some custom validation.
AngularJS Email validation using ng-pattern and Regular Expression (RegEx)
You can to do form validations in AngularJS using Regular Expression or RegEx. However, you will need a directive called ng-pattten to work with the expressions. This helps do customized validations (more accurate validations) on your input fields.
The markup and controller has few changes in the examples below. I have included AngularJS ng-pattern directive to the Input box. The directive needs some values.
There are two way you can assign values to the ng-pattern directive.
1) Assign Regular Expressions in the view itself:
<form name="form">
<input type="email" name="emailID" ng-model="email"
placeholder="Enter an Email ID"
required
ng-pattern=" ^[a-z]+[a-z0-9._-]+@[a-z]+\.[a-z.]{2,5}$"/>
<span class="err" ng-show="form.emailID.$error.pattern">
Not a valid Email
</span>
<input type="submit" ng-disabled="form.$invalid || !email" />
<p>{{email}}</p>
</form>The ng-pattern directive has expressions or patterns (you can add or remove values), which AngularJS will check to validate an email id.
Now check the ng-show directive (the error handler). In the previous example (above), I have used $error.email, here its $error.pattern. It will match entered values with defined patterns.
2) Assign Regular Expressions in the controller:
This is for dynamic validation. The above pattern or Regular Expressions can be defined in the controller using $scope.
<input type="email" name="emailID" ng-model="email"
placeholder="Enter an Email ID"
required
ng-pattern="regEx"/>
<script>
angular.module("myApp", [])
.controller('myController', ['$scope', function ($scope) {
$scope.regEx = '^[a-z]+[a-z0-9._-]+@[a-z]+\.[a-z.]{2,5}$';
} ]);
</script>The user will submit the data to the server, once they have filled the form with all the necessary information and AngularJS will validated the entered data at the client side. You must validate the submitted data at the server side too.
Thanks for reading. ☺