Handling Errors

The last step before we move onto authentication is to output the errors from the validators. This includes the custom validator we created to verify that the passwords match. Let’s get started.

Form control errors

We’ll start by handling errors for the form controls. This is something we’re already familiar with handling. We’re using Bootstrap for this app, so we’ll be using Bootstrap classes for styling the error output.

First, we’ll apply a class, called is-invalid, to the <input> element. This will give the input a red border. In the input.component.html template file, we’ll bind the ngClass directive on the <input> element.

<input [type]="type" class="form-control" [formControl]="control" [ngClass]="{ 'is-invalid': showMsg() }">

The condition for the is-invalid class is a function called showMsg(). This function does not exist. Let’s define it in the input.component.ts component class.