Angular email validation example

In this video we will discuss

1. Validating Email form field in Angular
2. Using multiple validators on a single input field
3. Angular safe navigation operator

Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking.

Email validation in Angular : There are 2 different ways to validate email form field in Angular. We can either use pattern validator or email validator. Email validator is introduced in Angular 4. So if you are using Angular 4 or later version you may use email validator or pattern validator to validate email. If you are using Angular 2, then your only choice is to use Pattern validator.

In this video we will discuss using the Angular built-in Email validator and in our next video we will discuss using the Pattern validator.

Text version of the video

Slides

Angular CRUD Tutorial

Angular CRUD Tutorial Text Articles & Slides

All Dot Net and SQL Server Tutorials in English

All Dot Net and SQL Server Tutorials in Arabic

[yaserarafat]

this is by far the BEST tutorial series for Angular. I have learned so much more from this series than any other out there. Thanks a lot.

[lamiakabli]

I have learned so much more from this series than any other out there. Thanks a lot.

[fullStackInKannada]

Thank you so much. It helped me a lot :). Keep posting these kinds of videos. It'll definitely help people like me :). Thank you once again.

[srinivasrapaka]

Awesome explanation of email validation

[ruggeddog]

man you got everything needed, appreciate it thank you very much

[Greenr]

Good instructor. However, the additional email validation manipulation to take the bug out starting at 10:18 would not need if this code is used,

<*ngIf="email.touched && email.invalid && !email.errors.required"> Invalid email

[shashanksen]

I am using materialize design with my angular 6 project and I am not able to display error message until not making email as a required field and I not want to make it as a mandatory field. How to solve that. As this validation not worked for me.

[pjmclenon]

hello thank you for the vid, i am looking for a production level form
that actually has email and repeat email because poeple make errors and
the email could be non existenet or spelling erros..thxz Lisa

[adityajasood]

Can we validate email field which is not in form?

[josephinecliement]

After writing this wat to write in component.ts?

[MathTutorialForEveryone]

where can I search for the whole code of this this project???

[bhaskerreddyalgubelly]

we can use like this for email validation
"<span class="help-block" *ngIf="email.errors?.required && email.touched">
Email is required
</span>
<span class="help-block" *ngIf="email.touched && email.errors?.required==null && email.errors?.email">
Email is Invalid
</span>"

[Sunill_Waugh]

The error in email validator described from 11.35 onwards is fixed in Angular 6 version

[pjmclenon]

hello thank you for the vid, i am looking for a production level form
that actually has email and repeat email because poeple make errors and
the email could be non existenet or spelling erros..thxz Lisa

[pjmclenon]

hello thank you for the vid, i am looking for a production level form
that actually has email and repeat email because poeple make errors and
the email could be non existenet or spelling erros..thxz Lisa