Angular2 email validation

angular 8 email validation pattern
angular 7 email validation pattern
angular 6 email validation example
angular 6 email validation pattern
angular 4 email validation pattern
angular 5 email validation pattern
angular email validation regex
custom email validation in angular 6

I am new in learning Angular2, and I want to make a validation form that verifies emails after a RegEx pattern.

My code looks something like this but I don't have any idea if I am doing it right, or what I did wrong, can somebody please help me a bit?

Thank you!

I fixed it. Thank you a lot everybody.

<div class="alert-email">
    <label for="contactemail">EMAIL: </label>
    <input type="email" id="contactemail" name="contactemail"
           required ng-pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
           [(ngModel)]="model.contactemail" #contactemail="ngModel"
           placeholder="Your email" /><br><br>
    <div *ngIf="contactemail.errors && (contactemail.dirty || contactemail.touched)" class="alert-email alert-danger-email"><br>
      <div [hidden]="!contactname.errors.required">
        Email is required
      <div [hidden]="!contactname.errors">
        Please input a valid email.

Try Something like that

<div class="alert-email">

        <div class="md-errors-spacer" [hidden]="contactemail.valid || contactemail.untouched">
            <div  *ngIf="contactemail.errors && contactemail.errors.required">
                Email is required
            <div  *ngIf="contactemail.errors && contactemail.errors.pattern">
                Email is invalid

Angular Email Validation Example, validate() link · mode_edit code. Method that validates whether an email address is valid. Returns the validation result if enabled, otherwise null. Validating emails in Angular is essential to ensure the accuracy and completeness of provided addresses. Without performing validation, dead-end email accounts can clog your application and complicate your interaction with users. Fortunately, Angular offers comprehensive mechanisms for validating users’ emails and ensuring their accuracy.

Angular 4 has a built-in "email" validation tag that can be added within the input. E.g.:

<input type="email" id="contactemail" email>

This will be valid for a series of numbers and letters then an @ then another series of letters. It will not account for the dot after the @ -- for that you can use the "pattern" tag within the input and your standard regex.

EmailValidator, To validate emails created using the reactive forms approach, we'll follow these three steps: Apply validation rules to the email form controls  Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular. One framework.

Email Validation in Angular: Full Guide, Angular 4 Already has a built-in validator for this “ ng-pattern ” . But this article is more focused on creating a base for custom validators so you could improve and​  Angular provides EmailValidator directive to validate email. We need to add email attribute in controls such as text input and use in FormControl while creating FormGroup . We will provide how to validate email with EmailValidator using Reactive form and Template-driven form.

For multiple email validation in a single field, you can do using the custom email validator.

import { FormControl } from '@angular/forms';

export class EmailValidator {

public static isValid(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());

static isMultiValid(control: FormControl): any {

  let tempEmail = control.value;
  let invalid = false;
  let regex =/[a-z0-9!#$%&'*+=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g;

  if(tempEmail.indexOf(',') > -1){
    var emails = control.value.split(',');
      for (let email of emails) {
        let isValid = EmailValidator.isValid(email)
          return{"email not valid":isValid}
      return null;
    let email = control.value.split(',');
    if( email == "" || ! regex.test(email)){
        invalid = true;
        return {
            "email not valid": invalid
    return null;



Angular 2 Form validations and custom validation, How to Implement, Learn the ins and outs of form validation with Angular 2. To do this we'll need to import the Angular validators from the forms package. Angular 2 supports validation for both it’s template driven and model driven approaches to forms. The model driven approach gives much greater control when it comes to validation, so we’ll use that approach. You can learn how to do template driven validation from the official Angular 2 docs. Let’s add validation to the form we’ve been

You can use this pattern for your email inputs:



This pattern accepts "sample@domain" also in addition of "sample@domain.dom". Using this email pattern "sample@domain." is not acceptable and 1 letter domain tld is not allowed ("sample@domain.s" goes wrong).

Angular 4 Custom Validation for Template Driven forms, Angular 4 has a built-in email validation tag that can be added within the input and only will need to set the email validation error (with a custom message), My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both  Angular email validation example. To validate the email we have to use a pattern type validator. The email validation pattern we are going to use is ^[a-zA-Z0-9_.+-][email protected][a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$ So we have to create our FormGroup like we explained above and create a FormControl to define our email form control with its validations.

Angular 2 Form Validation ―, If you want to validate email then use input with type="email" instead of type="text". AngularJS has email validation out of the box, so no need to use ng-pattern for this. Here is the example from original documentation:

Angular email validation example, Async validators: functions that take a control instance and return a Promise or Observable that later emits a set of validation errors or null. You can pass these in as the third argument when you instantiate a FormControl. Note: for performance reasons, Angular only runs async validators if all sync validators pass.

How To Validate Email in Angular 4 and TypeScript using , AngularJS offers client-side form validation. AngularJS monitors the state of the form and input fields (input, textarea, select), and lets you notify the user about the current state. AngularJS also holds information about whether they have been touched, or modified, or not. You can use standard HTML5 attributes to validate input, or you can make your own validation functions.

  • you have to remove the regex delimiter /
  • Since you edited in "I fixed it." you should probably accept an answer (or if you did it differently, answer yourself and accept that)
  • there are new TLDs you should change accordingly
  • <label for="CompanyEmail" class="control-label">Company Email</label> <input id="CompanyEmail" type="text" [(ngModel)]="user.Email" class="form-control" pattern="[a-zA-Z0-9.-]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" required #CompanyEmail="ngModel" placeholder="Please enter Company Email address" /> <div *ngIf="CompanyEmail.invalid && (CompanyEmail.dirty || CompanyEmail.touched)" class="alert alert-danger"> <div *ngIf="CompanyEmail.errors.required"> Company Email is required. <div *ngIf="CompanyEmail.errors && CompanyEmail.errors.pattern"> Email is invalid
  • Worked for me using Angular5. Copied pattern as-is, copied "Email is invalid" div as-is.
  • Only available since Angular4
  • When using it this way the input is implicitly required - even if not specifying "required". Bug or feature?
  • Resolved. With this <input type="text" class="form-control" #userEmail="ngModel" name="email" [(ngModel)]="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" [ngClass]="{invalid : userEmail.touched && !userEmail?.valid}" required email>
  • There is no requirement for an e-mail address to end with a .com or anything of the sort. user@localhost is valid
  • what should be the *ngIf condition for showing error message??
  • Thank you - this is the first of at least 9 or 10 that I tried that actually worked.
  • Thanks best answer
  • There is an error in [a-zA-Z0-9.**-**_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}. The minus char must be escaped. I prefer ^[a-zA-Z]{1}[a-zA-Z0-9.\-_]*@[a-zA-Z]{1}[a-zA-Z.-]*[a-zA-Z]{1}[.][a-zA-Z]{2,}$