2 Methods of email validation in Angular
There are two main methods for Angular email validation:
- Built-in validator: Angular features several built-in email validators, including EmailValidator. You can use them to verify the user-provided email addresses.
- Pattern validation: Pattern validation enables you to specify a regular expression (regex). Before performing the email validation in Angular, the regex needs to match the user-provided value.
In this post, you will find the way of validating email addresses using EmailValidator and PatternValidator.
Angular Email validation with EmailValidator
EmailValidator is a built-in email validator directive in Angular. It adds the email validator to controls marked with the email attribute. You can use it to perform the verification effectively.
EmailValidator Angular code example
1. If you are working on a template-driven form, you have to use the email attribute with ngModel in controls, with the below input element.
You can also use the email attribute in this way:
Here, you have set the email to “true.”
2. If the email address is not valid, you need to show an error message by using this code:
3. To enable email validation at runtime, you have to set validateEmail to true.
4. Now, you can use email property binding to set the email property of Step 1 to validateEmail.
Angular Email Validation with Regex
Pattern Validator allows you to validate email addresses by using a custom regex. It helps you to set your own rules conveniently, like allowing only the company’s email address for verification.
You can use the built-in Angular RequiredValidator and the Pattern Validator directives to verify the email IDs. To use the RequiredValidator directive, you will have to insert the required attribute to the form input controls. After checking whether the control is empty or not, it will return the validation result. To utilize the PatternValidator directive, you will need to add the pattern attribute to the form element controls. It will check if the email address matches your custom regex.
Here is a regex that you can use for Angular email validation:
PatternValidator code example
As you can see, you have to use required and pattern attributes to use the custom regex for validating the email address conveniently.
Angular email validation with reactive form
In Angular reactive forms, the validator functions are included in the form control model of the component class. As a result, when there is a change in the form control value, Angular can call the functions easily.
To perform Angular email validation with reactive forms, you will have to go through these steps:
- Apply validation conditions to the email form controls via regex
- Provide visual feedback for the invalid email address
- Display form's errors object message for form validation
Apply Validation Conditions to the Email Form Controls with Regex
With regex, you can easily specify and apply validation conditions to the email form controls. You just need to follow these steps:
1. First, you have to go to app.component.ts file and import Component, FormGroup, FormControl, and Validators.
2. Now, you have to specify selector, templateUrl, and styleUrls.
3. Then you can utilize Regex to apply validation conditions to the email form controls.
Overall, the code will look like this:
Provide Visual Feedback for the Invalid Email Address
Now, it’s time for providing real-time visual feedback to users if the validation fails. For example, if the user provides an incorrect email address, you can display a red border, like this:
You can use .ng-invalid classes to check whether the user-provided email address is accurate or not. How about binding the Bootstrap’s class.is-invalid class to the input elements? You can tie it to the condition that the email fields should be invalid and touched. Also, you can utilize the getter method to get access to the specific form controls.
In the app.component.html file, you will have to include this code:
Here, you have bound Bootstrap’s class.is-invalid class to the input. Also, you have set a condition specifying that the email fields should be invalid and touched.
Display Error Messages for Form Validation
Finally, you have to display error messages to inform the users about the issues associated with the given email address. Simply follow these steps:
1. In the app.component.ts file, you have to create a getter method that returns a form control.
2. Now, you have to go to the app.component.html file. You need to create a div element for displaying the error messages conditionally if the email field is invalid and touched.
Here, you have utilized the *ngIf directive to set a condition to render the div element if the given email address is invalid, touched, or contains a value (primEmail.dirty). Also, you have created an additional div element for creating a separate error message that states the following: “Please provide a valid email address.”
Summary: Email validation with reactive forms in angular
That’s it! Now, you have learned the way of performing Angular email validation with reactive forms. `Here is the complete code:
Code of app.component.html:
Code of app.component.ts:
Code of app.module.ts:
Alternatives to email validation in Angular
Another great way of validating emails in Angular using APIs. They can make the entire process very simple. You can verify email addresses with just a few lines of code.
You can try using Abstract’s Email Validation and Verification API. It is lightweight and super-fast. It allows you to validate email addresses effortlessly.
Let’s verify this email address with Abstract’s Email Validation and Verification API: firstname.lastname@example.org
If the request is successful, you will get this JSON response:
Notice that "is_valid_format" is set to true. That means the given email address is correct. Also, you get a variety of useful data, like quality score, email role, SMTP validation, etc.
As you can see, the Abstract’s Email Validation and Verification has made the entire process very simple. It doesn’t require you to write any code from scratch. You just need to get the API key and make a request for verifying the email address. So, you can get the job done instantly.
That’s how you validate emails in Angular. You can use the regex with Reactive form to verify user-provided email addresses. However, the easiest way is using an email validation API. It will enable you to perform verification effortlessly.