How to validate an email in Angular2?

Question

I am using FormGroup, FormBuilder and Validators class to validate a form in Angular2 app.

This is how I am defining the required validation rules for email and password validation:-

export class LoginComponent implements OnInit { loginFormGroup:FormGroup; adminLoginmodel = new Admin('', '', '', 'Emailsss','Passwordsss'); constructor( private route: ActivatedRoute, private router: Router, private _adminLogin: AdminLoginService, fb: FormBuilder ){ this.loginFormGroup = fb.group({ 'email' : [null, Validators.required], 'password': [null, Validators.required] }); } }

How can I validate if a given string is a valid email?

Note:

Someone has just tried to mark this question as a duplicate of this question.

My question specifically asks about implementation of FormGroup and FormBuilder, which was even stated at the beginning of the question. This is a fine example to show how some good and valid questions get judged unfairly. Hope the moderators and other so-called "stackoverflow-community-builders" won't edit this question to remove this section.

Possible duplicate of Angular2 email validation

bugs
– bugs

2018-04-06 08:32:33 +00:00
Commented Apr 6, 2018 at 8:32 — bugs
– bugs, Commented Apr 6, 2018 at 8:32
regex

Vikas
– Vikas

2018-04-06 08:57:00 +00:00
Commented Apr 6, 2018 at 8:57 — Vikas
– Vikas, Commented Apr 6, 2018 at 8:57
EmailValidator

Efe
– Efe

2018-04-06 09:05:03 +00:00
Commented Apr 6, 2018 at 9:05 — Efe
– Efe, Commented Apr 6, 2018 at 9:05

Tomasz Kula · Accepted Answer · 2018-04-06 09:25:29Z

2

this.loginFormGroup = fb.group({ 'email' : [null, Validators.compose([Validators.required, Validators.email])], 'password': [null, Validators.required] });

Compose multiple validators into a single function that returns the union of the individual error maps.

edited Apr 6, 2018 at 9:25

answered Apr 6, 2018 at 9:20

Tomasz Kula

16.9k3 gold badges72 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Saswat Over a year ago

Great! This one is the actual answer I needed more. It shows how I can use multiple validation rules! I was about to post a question on how to have multiple validation rules on a single <input>. Validators.compose does the trick. Many many thanks. Moreover, Validators.email also checks whether an email is valid or not. Hence, we don't need the preg match pattern.

Tomasz Kula Over a year ago

Glad I could help :)

Saswat Over a year ago

:). I am posting another question. Hope you can help me in that too. :)

Saswat Over a year ago

Here's another question. stackoverflow.com/questions/49689689/…

Gianluca Paris · Accepted Answer · 2018-04-06 08:38:15Z

You have to use pattern validator with a regex:

this.loginFormGroup = fb.group({ 'email' : [null, Validators.pattern('^(([^<>()\[\]\\.,;:\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,}))$')], 'password': [null, Validators.required] });

Email like [email protected] isn't detected as valid mail using your script.
Build your own regex, that is an example for validating a pattern

Collectives™ on Stack Overflow

How to validate an email in Angular2?

2 Answers 2

4 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Linked

Related