Handling Server Validation Errors Globally using Interceptors and Behavior Subjects [Angular]
In this article, I will show you how to store backend validation error messages and retrieve them with ease to the user below each field.
Expected results:
NOTE: You need to read my previous article Handling HTTP Error Messages Globally using Interceptors and Toasters [Angular] to understand this one as I will complete work on the code I’ve created.
This was the last code we created.
handeErrorsInterceptor.ts
handleErrorService.ts
The status of any server-side validation messages is 422 (Unprocessable Entity)
So, we will add a case to listen to 422 status as the following:
We will display a toaster with a message “Validation Error!” and then we will pass the whole error (err) to a function handleBackendValidations.
And this function will be like this.
In this function, I’m creating a constant “errors” as an empty object, and then I’m iterating to the errors property that the server sent it to me to create an errors object with keys as the input key and the value which is the message.
For example, the whole backend error will be like:
So, what I just did is extracting the “errors” object from the response and store it in the errors constant I created.
Your backend response might be different, so the solution of handleBackendValidations might be different as well.
After that, I’m passing the created errors constant to another function addServerErrors.
This function exists in another service called DataShareService which I use to store the data as Observables so I can easily listen and retrieve them globally in my app.
Let’s take a look inside dataShareService.ts
First, I’m creating a serverErrorsSubject with an initial value of null.
And then create a serverErrors$ Observable by using the asObservable()
NOTE: The $ here represents that this variable is an Observable as a common naming convention.
And finally creating two other methods for removing or adding server errors object.
Now, inside your component.ts:
Note: We need to remove the server errors in each mount of a component to prevent displaying a validation message related to another component.
Alternative way: You can subscribe to the router events on the first page you load (usually app.components.ts) and check if the instance of the event is a NavigationEnd.
Now, inside RegisterComponent whenever there is a server errors object we can subscribe on it and retrieve its values in the html like so:
Here I’m taking the email input as an example, I’m subscribing using the async pipe to the email property and using an alliance serverErrors without the $ and displaying the email value which will be the validation message for the email.
With some styling to the theme-error class and with the help with the wow.js package, I can add a cool animation to the validation div.
The final result will be something like this:
