@error() to show conditional error messages in Angular

Here we discuss the new approach to show the error message conditionally without *ngIf.

We usually write *ngIf with the long expression on the HTML element to show the error message conditionally 😏 .

As per me, that’s not the elegant way of doing. Because HTML is meant for representing the information on the web. It’s not for writing business logic on the page even those logics are too small. But think on that perspective if we have more than 10 fields then we messed up our code(😯) to write the conditions on the HTML elements.

Then; The alternative comes in our mind. We can show the validation message through submit or blur event of FormGroup/FormControl. In that case, we don’t need to write much conditional expression on the HTML element. But that doesn't fulfill the whole enterprise application needs to show the error messages conditionally. Again we go back and follow the *ngIf 😅 .

What is @error() decorator?

My initial thought was to design the @error() decorator is to get rid of the *ngIf with long expressions or custom directive/subscriptions to show the error messages conditionally and also the conditional expression code must be readable and extendable.

The @error() decorator covers all aspects of it. You can use error decorator on top of the property where you want to show the error message conditionally.

Let’s discuss the common scenarios which we usually follow in the angular applications. Based upon the scenarios we transform the code with the @error() decorator approach to clean our HTML with respect to showing error messages conditionally.

This article is mainly helpful for those users who are using decorator based validation in angular reactive forms. If you are not aware of decorator based validation then please refer New way to Validate The Angular Reactive Forms to get an idea about it.

I am skipping three steps of installing the package, registering the module and creating the FormGroup. If still, you want to brush up the things, then please refer to this link.

Let’s discuss the scenarios and use the @error() decorator approach.

Show Single Error Message Conditionally

Validation message should be visible when the ‘firstName’ FormControl is touched and invalid.

To achieve this we usually write below code:

Now, let’s see the @error() decorator approach.

We create a User model and the property name is firstName. We apply @error() on the firstName property and set the expression as a parameter.

Now, on the HTML side, we use the property of ‘errorMessage’. The errorMessage property will only bind. If the @error() decorator conditional expression is passed and the control is invalid.

How it works on UI, see the below image and also you can refer the stackblitz example.

Show Multiple Error Messages Conditionally

Validation messages should be visible when ‘email’ FormControl is dirty.

We almost write duplicate code to achieve this (😞) with the standard approach. see the below code:

Now transform with @error() decorator approach, Here we create email property and apply the validation decorators of @email(), @minLength() and @required(). We also add @error() decorator to bind the error messages conditionally.

As there are multiple validations, we use ‘errorMessages’ property to show the error messages. This will only bind when the error expression is passed.

showing multiple error messages.

See the action below, refer the stackblitz example.

Show Error Message Based on Button Click with Multiple Criteria

The ‘userFormGroup’ has four FormControls(type, firstName,middleName and lastName), three FormControls (firstName,middleName and lastName) should show error the messages based upon ‘type’ property value. At a time the type property value is any one of these initial, partial and complete.

Showing FormControl error message scenarios are :

If the type value is ‘initial’ or ‘complete’ then it should show the validation message of firstName FormControl, if the control is invalid.

If the type value is ‘partial’ or ‘complete’ then it should show the validation message of middleName and lastName FormControl’s.

As per the above-stated scenario, we generally write code like below:

Let’s implement the @error() decorator approach.

First, we create four properties(type, firstName, middleName, lastName) in User model and set the decorators.

Now on the HTML side, we use the ‘errorMessage’ property to show the error message.

See the action below and refer the stackblitz example to get more information on this.

That’s it 😃.

I hope you like this approach. If you have any question/suggestion please write the comment below.