Angular reactive form custom validator

In this video we will discuss, creating and using a custom validator in an Angular reactive form.
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.
/ @aarvikitchen5572
Text version of the video
csharp-video-tutorials.blogsp...
Slides
csharp-video-tutorials.blogsp...
Angular 6 Tutorial
• Angular 6 tutorial for...
Angular 6 Tutorial Text Articles & Slides
csharp-video-tutorials.blogspo...
Angular, JavaScript, jQuery, Dot Net & SQL Playlists
ua-cam.com/users/kudvenka...
Angular provides several built-in validator functions like required, pattern, minLength, maxLength, etc. Most of our application validation requirements can be met using one or more of the these built-in validator functions. However, sometimes we may need custom validation logic.
For example, let's say we only want to allow an email address with pragimtech.com as the domain. Any other email domain is invalid.
We can achieve this very easily using a custom validator.

[@MZ-uv3sr]

I love your videos and that you go into the deep dive of it.

[@bkarthikkannan]

Thanks for the help !

[@riddhipatel2578]

Thanks for this video ... Indeed needed

[@VedPrakash-ex1nw]

you explained very well with demonstration...

[@sopno6005]

Thanks. Your video is more easy to understand......

[@krishkir]

Hi Venkat garu, Request you to share some video on Async validation like email id already exists with user defined directive.

[@belmiris1371]

Thank you!

[@ottocheley7852]

Can you please make a video about making custom controls that work both in template forms and reactive forms?

[@KeimaOtamegane]

Subject is explained pretty well. Also used real like examples. :+1:

[@sovanroy9846]

It will be great if you also discuss the following validations :
1. Autocomplete validation. Makes sure the value is taken from the provided autocomplete list.
2. File upload validation. Makes sure at least one file is chosen.

[@pamidichetan]

On page load, email is default radio button selected and touch the email input field without entering any data and now the validation error is displayed and now change to phone radio button the validation will show to both email and phone. Tried by handling like this but not working,
const emailControl = this.employeeForm.get('email'); emailControl.clearValidators();

[@saithejamacharla5115]

Hey Chetan you are correct this is because while we are creating email form control we are making email as mandatory like this email: ['',[Validators.required]]
so even though you clear validators using clearValidators() it will not have any affect

[@kumailn7662]

You missed to explain how that message is appearing where you mentioned that in the code?

[@riddhipatel2578]

From where i can learn that

[@nys8260]

he did it before

[@mandeepslngh939]

please anyone tell me why we using +1 with '@'?

[@wilsonsfiso3310]

to skip the '@' symbol and not include it on the string to compare.
the string returned to him is '@domain.com'
to compare the domains, he has to skip one index, hense the +1 to get just 'domain.com'
Dont think I explained that well, but I tried. :+1

[@merajulhasan5586]

CreateEmployeeComponent.html:27 ERROR Error: Expected validator to return Promise or Observable.> I am getting this error when I tried use the code you mentioned in this tutorial

[@merajulhasan5586]

I solve it, by returning promise, kindly help me retruning observable from here.

[@nanu180]

when creating function with function keyword outside of ngOnInit like you have created. its gives us following error:
ERROR in src/app/create-employee.component.ts(153,1): error TS1068: Unexpected token. A constructor, method, accessor, or property was expected.
src/app/create-employee.component.ts(163,1): error TS1128: Declaration or statement expected
Please provide me solution. why its happen in out hand. I am waiting for your reply.

[@nys8260]

put the function out of the class

[@dileepkumarkaranki]

Unexpected token. A constructor, method, accessor, or property was expected.ts(1068)
I am getting this error.

[@debarghyachakraborty]

Declare the function outside of the class.

[@jswebapp]

You miss this step in ur video so output will not as like you sir
Email domian should be prgaimtech.com

[@nys8260]

you don't need it, because the validations code in component class not html

[@petersrule]

Please learn the correct pronunciation of "parameter"! Even some native speakers pronounce this wrong. I used to say "kilometer" wrong in the same way but I am so glad that I learned how to say it correctly. The correct pronunciation of both words sounds so much better.