Move validation messages to the component class in reactive form 

Update this and try validationMessages : any = { 'fullName': {

@@ranjithreddy7985 That cost me 2 days.. Thank you sir..

Line no 61 of create employee component .ts Only i can right This.validationMessages; If i right this.validationMeaasge[key]; It is throwing error index signature ts(7053).

do you get the solution for this??

to solve this issue use "// @ts-ignore " comment above the line

Hi Vijay - There are several benefits of moving validation and error messages to the component class. They are as follows 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.

Hello Osama - The Angular 6 playlist, at the following link, has all the videos in logical sequence. Hope this helps. ru-vid.com/group/PL6n9fhu94yhWNJaDgh0mfae_9xoQ4E_Zj You can find all our course playlists at the following link. ru-vid.complaylists?view=1&sort=dd

i got same error, and got resolved i have included this formError : { fullName: '', email: '', skillName: '', experienceInYears: '', proficiency: '', }; Instead of formError = { fullName: '', email: '', skillName: '', experienceInYears: '', proficiency: '', };

Bro what is the difference between two statements like you mentioned above statements

bro that forEach loop will give you one by one errors on each iteration. so you have to add these errors. that's why he used it "this.formErrors[key] += messages[errorKey];". and in your case only last error will be shawn bc all errors wil override.

it means you need to declare/Define it first.

Hello Vibhuthi - Can you please check which line is causing this error. To figure this out find all references to fullName property, comment all the references except one and see if you get the error. Use this technique to isolate the problem to the line that actually causing this error. Hope this helps to nail down the issue.

Make Sure ValidationMessage Json is valid!

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

formError = { fullName: '', email: '', skillName: '', experienceInYears: '', proficiency: '', };

ng serve --open Or ng serve -o

Thank you Sandeep. You can also make it even shorter ng s -o

@@Csharp-video-tutorialsBlogspot yes sir I am using the same as u said

messages constant contain all the validation errors of a form control, where as the abstractControl.errors property contain the names of the validation rules the form control has failed. For example, if fullName control has failed required validation, the required key will be in the errors collection of abstractControl. So from the messages constant we need to retrieve the validation message for required error key. If in the future we add a form control that can possibly have multiple validation rules failing, we want validation messages of all those failing error keys, hence the loop. Hope this answers your question.

I still cannot understand how the following codes work. If the errorKey constant is ''required'' validation rule, then messages[errorKey] contain 'Full Name is required.' validation message and this message will be stored in the fullName property of the formErrors object. Am I correct ??? if (abstractControl && !abstractControl.valid) { const messages = this.validationMessages[key]; for (const errorKey in abstractControl.errors) { if (errorKey) { this.formErrors[key] += messages[errorKey] + ' '; } } }

Yes. That is correct.

I am still struggling to understand the following block of code. const messages = this.validationMessages[key]; for (const errorKey in abstractControl.errors) { if (errorKey) { this.formErrors[key] += messages[errorKey] + ' '; } } If the fullName form control has failed required validation, minimum length validation and maximum length validation, could you kindly explain how the above block of code works in order to retrieve all the 3 associated validation messages from the validationMessages structure and store those validation messages in the fullName property of the formErrors object ???

First of all, the following 3 validators are mutually exclusive, meaning at any given point only one of them can fail. required minimum length maximum length However, for the example sake, let's assume, both required and minLength validators have failed. In this case 1. abstractControl.errors property will have both the keys - required and minlength (AbstractControl in this context is refferring to fullName form control) 2. messages constant will contain all the 3 validation messages (for required, minLength and maxlength) 3. The for loop executes 2 times, because in the abstractControl.errors property we have 2 keys (required and minlength ) 4. The first time when the for loop completes execution it contains validation message for the required error formErrors['fullName]='Full Name is required. ' The second time when the for loop completes execution it contains validation message for the minlength error along with the required error. So formErrors['fullName] looks as shown below, displaying both the messages with a single space between them. formErrors['fullName]='Full Name is required. Full Name must be greater than 2 characters' Hope this clears your confusion