Input Validation is a big topic when it comes to forms. And even more in those large, enterprisey apps, where validation can become really crazy. Now, Angular forms of course provide different mechanisms for handling validation out of the box. However, in this article I won't go into those details, I will rather show you a possible strategy for visualizing server side validation errors.

Before starting straight away, we can basically have these types of validation:

• client-side - they prevent you even from submitting the form itself. The simplest for sure being the required validator, or others like checking the max length etc.
• client-side async - typical use case: checking for the availability of the username. By using an async validator, we can call a function on the server via an API to verify whether the user provided value (in this case the username) has not already been taken. Aside from the difference that we call a server API, the behavior is quite similar. Unless the validator is satisfied, we won't be able to submit our form.

Sometimes however, we have to submit the form to be able to perform more cross-cutting validation logic. We might need to take the data combine it with other data (from the DB) we only have available on the server side, before ultimately then returning either a success status or fail due to "validation errors". Such validation errors can then be targeted to a single field (i.e. the username field) or even the entire entity (or user model).

Read more »

TL;DR

Might want to watch the according Egghead.io lesson then 😉...