Effortlessly Show Validation Messages in Angular
So I was tired of handling validation messages in the template and this post was born.
We will make use of a directive and reusable component to make this happen. Before we get into how I want to go over why you probably need a structure like this:
· Automate a boring and error-prone process (Did I add error messages in the template? any typos?)
· Standardising styling and wording
· Easier maintenance. Centralising validation messages can help you change the wording of the messages with just one line of code. If you are handling validations in the template, you need to make A LOT of changes.
I will be using Reactive Forms with inline validation in this post.
Initial Setup
This setup may look okay at first but gets untenable on an enterprise project.
We need to change this but how do we do that?
We will start by creating a directive.
By itself, this directive is pretty useless. But in this setup, it is playing an important role — being the bridge between the shared component and the form control it is attached to. Using this directive, errors from the reactive form will flow into our shared component.
You can pass the directive a string that will be used in the error messages like this.
After the directive, it is time to create the shared component.
Form Field component is responsible for one thing, showing the validation message it receives from ErrorService. All the other content that will be displayed here will be projected inside the ng-content tags.
Pro Tip: If you find yourself using the FormField component over and over again for your projects, it might be a good idea to publish it to a component hub such as Bit. This would let you reuse your components — making your code scalable and maintainable, speeding up development, and maintaining a consistent UI across your project. Learn more about this here.
Note that your setup can be even simpler if you do not need to display control names in the validation messages. I will keep it in this case.
We can now use an object that will keep a list of errors to show the user.
ERROR_MESSAGES object allows us to return an error message that matches one of the ErrorTypes defined above. We are passing additional arguments if we want to customise error messages.
And lastly, we create our errorService. getErrorValidationMessage function gets the errors from the shared component and returns the corresponding error message. GetErrorMessage function is used to get the value of the specified required value of the built-in minlength validator.
And this is the final outcome!
You can find the Stackblitz demo here.
A few ways you can build on this:
- Support different form controls
- Customise error message with options
Build Angular Apps with reusable components, just like Lego
Bit’s open-source tool help 250,000+ devs to build apps with components.
Turn any UI, feature, or page into a reusable component — and share it across your applications. It’s easier to collaborate and build faster.
Split apps into components to make app development easier, and enjoy the best experience for the workflows you want:
