Move validation messages to the component class in reactive form

In this video we will discuss, how to move validation messages to the component class.

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.

Text version of the video

Slides

Angular 6 Tutorial

Angular 6 Tutorial Text Articles & Slides

Angular, JavaScript, jQuery, Dot Net & SQL Playlists

There are several benefits to this

1. Easily unit test validation logic

2. Instead of hard-coding validation messages in the application, we can load them from an external source like a database or a file.

3. Change validation dynamically at run-time based on the decisions made in code or user selections

In this video let's move the validation messages to the component class and in our next video we will discuss moving the logic to show and hide these messages.

[belmiris]

These videos are gold. It's generous of you to share them, thank you!

[ashishkapoor]

I am not able to extract validatiomessage property value by putting key as parameter in square bracket it is showing index signature error plz help with it i am stuck here from 3 days

[peterl]

Great video. Will you go over multiple language support?

[aakashchauhan]

Getting below error please help me out-

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ fullName: { required: string; minlength: string; maxlength: string; }; email: { required: string; }; skillName: { required: string; }; experienceInYears: { required: string; }; proficiency: { required: string; }; }'.
No index signature with a parameter of type 'string' was found on type '{ fullName: { required: string; minlength: string; maxlength: string; }; email: { required: string; }; skillName: { required: string; }; experienceInYears: { required: string; }; proficiency: { required: string; }; }'

[vijayu]

Hi, Thank you for the video. I am not able to understand the purpose of moving the validation and error messages from template to the component class. What is the advantage? Where it is helpful? please do explain. Thanks

[sashtana]

Hi Venkat Sir, i have been following your videos for long. I am facing an error 'Cannot read the property 'fullName' of undefined. I am getting this error on the following line of the code. before that i didnt face any problem.

for (const errorKey in abstractControl.errors){
if(errorKey) {
this.formErrors[key] += messages[errorKey] + ' '; // on this specific line is the error.
}
}
Please help. It gives error when it enters the loop for the first time thats why it says fullName is undefined.

[gauravg]

I am also facing the same issue. Hence I tried to print and the error was displayed on console. I could infer from this that validationMessage array is not initialized

[anantbalwantbodas]

It would help understand code in logValidationErrors method, if explained using debugger.

[osamahashim]

Great work, many thanks,
But could you make numbers for lesson litle while uploading please?

[vigneshgovindharaj]

Sir I am new to coding i am getting Cannot read property 'required' of undefined on the console. please help me

[sunpreetsingh]

for email you can also add in email validation mgs as "email" : "not a valid email id",

[jangamvibhuthi]

ERROR TypeError: Cannot read property 'fullName' of undefined : Sir i am getting the error .. i have written same as your code.please suggest me

[ashifali]

you can remove + and use like
this.formErrors[key] = messages[errorKey] + ' ';
in place of
this.formErrors[key] += messages[errorKey];
But ur vdo is awsome.Thanks dear

[ymtan]

Hi Venkat,

I don't really understand the following code. Why do we need to loop over the abstractControl.errors ???

for (const errorKey in abstractControl.errors) {
if (errorKey) {
this.formErrors[key] += messages[errorKey] + ' ';
}
}

Best regards,
Edward

[kevinrobinson]

Not great if you have multiple forms. Your validation code is going to be repeated. Better to move this code to a separate class or better still a custom npm repository. Also never write code in your ngOnInit or constructor methods like this. Write a function and call thr function.