search

xtreamsrl / ngx-validation-errors

Angular library to easily show input validation errors
MIT License
39 stars 11 forks source link

Unable to make it work #1

Closed psenechal closed 5 years ago

psenechal commented 5 years ago

I read your article on Medium and thought I would give it a shot to see how it works. I have installed @ngx-translate and have it working to translate some general information in my project. I installed @xtream/ngx-validation-errors and added NgxValidationErrorsModule.forRoot() as an import in my app.module file. In my LoginComponent HTML file, I added validationContext="LOGIN" to the form tag. I added formFieldContainer to the div surrounding my input which has a formControlName of email. My LoginComponent form declaration is built with Validators.required and Validators.email for the email form control. My language file has the following definition: "LOGIN.EMAIL.ERRORS.REQUIRED": "EMail Address is required."

However, I cannot get an error message to display and the "is-invalid" class is never applied to the input.

Any ideas on what I might be doing wrong? Thanks.

rams23 commented 5 years ago

Hi @psenechal could you please check the example project in the repo or share some code? I loaded the project on stakblitz (https://stackblitz.com/github/xtreamsrl/ngx-validation-errors) and even created a simple new project using the library (https://stackblitz.com/edit/ngx-validaiton-error-basic-example) and it seams to work. The described procedure seams correct.

psenechal commented 5 years ago

Looks like I had the json file incorrect. I didn't realize I had to nest the error like so:

"LOGIN": { "EMAIL": { "ERRORS": { "REQUIRED": "EMail Address is required." } } }

I will test this afternoon.

psenechal commented 5 years ago

Figured out what the difference is in my project. The module I'm trying to use the validation in is lazy loaded. If I move it from being lazy loaded and into the AppModule, it works fine.

Any solution for validation in lazy loaded modules?

rams23 commented 5 years ago

@psenechal I updated the library with a small fix for lazy loading and added a lazy loaded module in the example project. Let me know if it is ok

psenechal commented 5 years ago

Hi Luca, I updated the dependency and added the export to my shared.module.ts file and everything is working great now. Thanks for the quick fix!

I do have another question, but I'll open up a different issue for that for tracking purposes.