Angular2 email validation

Question

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>
      <div [hidden]="!contactname.errors">
        Please input a valid email.
      </div>
    </div>
  </div>

you have to remove the regex delimiter `/` – Avinash Raj Feb 21 '17 at 11:59 — Avinash Raj, Feb 21 '17 at 11:59

Jake Kieranan · Answer 1 · 2017-05-31T20:29:33.087

60

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.

edited May 31 '17 at 20:29

answered May 18 '17 at 23:40

Jake Kieranan

650
1
6
10

1

Only available since Angular4 – LeO May 31 '17 at 08:43
4

When using it this way the input is implicitly required - even if not specifying "required". Bug or feature? – Strinder Jun 20 '17 at 17:37
I just noticed the same thing. My form is invalid straight away, even when the email field is left empty. – Challe Jun 22 '17 at 06:24
How could you use this along with ngClass?? `[ngClass]="{invalid : !email.valid}"`? – Towelie Jul 10 '17 at 04:19
@JakeKieranan `` I essentially want to do the same as this, however add the `invalid` class if the email is not valid? So something like this. `` Where the pattern is checked & the class `invalid` is added if the email is not valid – Towelie Jul 10 '17 at 21:10
3

Resolved. With this `` – Towelie Jul 10 '17 at 21:20
8

There is no requirement for an e-mail address to end with a .com or anything of the sort. user@localhost is valid – Geoff Lentsch Jul 21 '17 at 02:44
1

what should be the `*ngIf` condition for showing error message?? – Ankur Shah Dec 09 '17 at 11:17
@AnkurShah *ngIf="email.errors.email", where email is the reference to the field (starts with #) – nicolascolman May 03 '19 at 16:49

score 47 · Accepted Answer · answered Feb 21 '17 at 12:07

47

Try Something like that

<div class="alert-email">
        <label>Email</label>
            <input
                id="contactemail"
                type="text"                
                #contactemail="ngModel"
                [(ngModel)]="model.contactemail"
                required
                pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">

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

answered Feb 21 '17 at 12:07

MMK

3,571
1
20
30

1

there are new TLDs you should change accordingly – Toolkit Aug 28 '17 at 09:08
1

Company Email

Company Email is required.
Email is invalid
– ssmsnet Jan 18 '18 at 14:02
Worked for me using Angular5. Copied pattern as-is, copied "Email is invalid" div as-is. – BobC Feb 17 '19 at 22:06
This looks like yet another ad hoc regex which will accept invalid addresses and reject valid ones. Don't roll your own. – tripleee Jan 06 '20 at 09:20

score 29 · Answer 3 · answered Sep 27 '17 at 05:50

29

Angular 4 Email Validation :

Use email to your input
If you want .com for email use pattern pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}

Final :

`<input type="email" [(ngModel)]="enterEmail" name="myEmail" #myEmail="ngModel" email pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" required>`

answered Sep 27 '17 at 05:50

Sreekanth Karini

1,255
13
14

1

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,}$` – Khonsort Jul 10 '19 at 11:03
Hint: any regex which contains `{1}` was written by someone who is only just beginning to learn about regular expressions. – tripleee Jan 06 '20 at 09:22

tushar zore · Answer 4 · 2019-03-27T13:33:59.567

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 {

  console.log(control.value);
  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) {
        console.log(email);
        let isValid = EmailValidator.isValid(email)
        if(!isValid){
          return{"email not valid":isValid}
        }
      }
      return null;
  }
  else{
    let email = control.value.split(',');
    if( email == "" || ! regex.test(email)){
        invalid = true;
        return {
            "email not valid": invalid
        };
    }
    console.log("valid");
    return null;

   }
  }
}

.

score 4 · Answer 5 · answered Nov 22 '18 at 17:30

You can use this pattern for your email inputs:

^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$

ref

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).

score 1 · Answer 6 · edited Dec 22 '20 at 16:06

1

Try this:

^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$

edited Dec 22 '20 at 16:06

Cody Gray

230,875
49
477
553

answered Dec 22 '20 at 16:04

khascout

11
1

1

Hello & Welcome to StackOverflow! While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. Please read the tour, and [How do I write a good answer](https://meta.stackexchange.com/questions/7656/how-do-i-write-a-good-answer-to-a-question)? – LogicalBranch Dec 22 '20 at 16:42

score 0 · Answer 7 · answered Jan 06 '20 at 09:02

0

This pattern worked for me which will accept alphanumeric characters and '.' special character.

^[\\w]+(?:\\.[\\w])*@(?:[a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,6}$

answered Jan 06 '20 at 09:02

nik

1,310
3
16
31

score 0 · Answer 8 · answered Oct 03 '20 at 15:52

0

this pattern email working :

 <input  pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">

answered Oct 03 '20 at 15:52

fahimeh ahmadi

639
7
11

score -2 · Answer 9 · edited May 24 '19 at 17:27

-2

This pattern worked for me :

 pattern="[a-zA-Z0-9.-]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{3,}"

edited May 24 '19 at 17:27

Swati

26,918
4
18
39

answered May 24 '19 at 14:44

anirudh talluri

71
2
11

score -2 · Answer 10 · edited Jan 06 '20 at 09:02

-2

Try This One it will work:

^[a-zA-Z]+([.-]?[a-zA-Z0-9]+)*@([a-zA-Z]+([.-]?[a-zA-Z]))[.]{1}[a-zA-Z]{2,}$

edited Jan 06 '20 at 09:02

4b0

20,627
30
92
137

answered Sep 25 '19 at 06:53

Kumar VL

45
4

Angular2 email validation

10 Answers10

Linked

Related