How to Implement Email Validation in Angular

1. Input Validation in Angular
2. Ways to Validate Email Addresses in Angular
3. AngularJS Validation (Email) With Regular Expressions and ng-pattern:

AngularJS provides easy input data validation on the client side. Many input fields may be present on your form, which will aid in collecting data from your users. However, before doing anything with the data, you must validate the values in the fields. In this article, we will discuss how to validate email in AngularJS.

Input Validation in Angular

An input control’s data is validated using a validation. If the information does not pass validation, the user will receive an error message. Required Field, Minimum Length, Maximum Length, Pattern, and many other types of validation exist in AngularJS.

Syntax of Email Validation in AngularJS:

<form name="Form">

  Code: <input type="text" name="pincode" ng-model="txtpin" ng-pattern="/^[0-9]{1,5}$/" />
  
  <span ng-show="personForm.pincode.$error.pattern"> Only numbers allowed </span>
  
  </form>

Ways to Validate Email Addresses in Angular

Angular has several methods for validating emails, some of which are listed below:

Built-in validation: Angular has specifically installed email validators that you can use to check that user-provided email addresses.

Pattern validation: You can specify a regular expression (regex) Angular email validation pattern that must match the user-provided value before validation occurs.

Example of Email Validation:

<script src="https://code.angularjs.org/1.2.1/angular.min.js"></script>
<div class="container" ng-app="myApp">
<div class="Sample">
    <div class="form-area" ng-controller="formCtrl">  
        <form role="form" name="inquiryForm" novalidate>
        <br style="clear:both">
                    <h3 style="margin-bottom: 25px; text-align: center;">Example</h3>

					<div class="form-group">
						<input name="email" ng-model="email" id="eml" type="text" ng-pattern="eml_add" ng-required="true" autocomplete="off" placeholder="Email" class="form-control" >            
					</div>

            
        <button type="button" id="submit" name="submit" class="btn btn-primary pull-right" ng-disabled="inquiryForm.$invalid">Submit Form</button>
        </form>
    </div>
</div>
</div>

AngularJS Validation (Email) With Regular Expressions and ng-pattern:

In AngularJS, you may use Regular Expressions (RegEx) to form validations. You’ll need to use the ng-pattern directive to work with the expressions. What is ng-pattern? Let’s discuss it.

ng-pattern Directive in AngularJS

The ng-pattern in angularjs is used to validate input text controls using regular expressions. If the input text is validated according to the condition, the ng-pattern command returns true; otherwise, it throws an error. To learn more about ng-pattern, click here.

Before discussing in detail, you should have the idea of the following directive:

• ng-minlength: Provides the shortest possible length.
• ng-maxlength: Provides the most extended possible length.
• ng-model: Assigns validation attributes to the field, such as $error, $valid, and so forth.
• ng-required: This is used to provide the required field.
• ng-show: This command displays an error message based on a parameter.

To start, you need to add ng-messages as a module dependency because it may be required.

<form name="form">
            
  <input type="email" name="emailID" ng-model="email"
      placeholder="Enter an Email ID"
      ng-required="true" 
      ng-pattern=" ^[a-z]+[a-z0-9._-]+@[a-z]+\.[a-z.]{2,5}$"/>

      <div *ngIf="firstEmail.errors || firstEmail.touched">
        <small class="text-danger" *ngIf="firstEmail.errors.required">Primary email is required</small>
    
      </div>
  <input type="submit" ng-disabled="form.$invalid || !email" />

</form>

ng-required="true" is the first thing to notice. This makes it necessary to fill up the input form. Then comes the ng-pattern. The ng-pattern directive contains expressions or patterns that AngularJS will verify to validate an email id (you can add or remove values).

If the user inputs an email address that does not follow the XYZ format, we will receive an error.

The ng-pattern directive contains expressions or patterns that AngularJS will verify to validate an email id (you can add or remove values).

Finally, let’s provide consumers with real-time error notifications to help them fix any issues with their provided email addresses.

Let’s add the div element, which will help with conditionally displaying error warnings to users. If the email field contains problems, we’ll automatically use the *ngIf directive to render this element.

Let’s generate separate error messages for each rule we set in the first step above within the div tag. Let’s use the form’s errors object and the *ngIf directive to render the messages dynamically. We’ll first see if the errors object exists before going to the needed or pattern property.