Lesson Outline

Handling Error Messages with a Custom Component

We're going to look at building another custom component now, but this time we will be creating something a bit more complex. We will be building an improved version of the error messages component that we used in the Hangz application to make it a little more adaptable to a broader range of situations.

If you haven't already completed the Hangz application from the CouchDB/PouchDB module, I will recap the basic idea. When using Angular's FormBuilder to create a form, we define a FormControl for each input field in the form. We create a FormGroup which defines all of our FormControl's like this:

this.registerForm = this.formBuilder.group({
  username: [
    '',
    Validators.compose([
      Validators.maxLength(16),
      Validators.pattern('[a-zA-Z0-9]*'),
      Validators.required,
    ]),
    usernameValidator.checkUsername.bind(usernameValidator),
  ],
  email: [
    '',
    Validators.compose([Validators.maxLength(50), Validators.required]),
    emailValidator.checkEmail.bind(emailValidator),
  ],
  password: [
    '',
    Validators.compose([
      Validators.minLength(5),
      Validators.maxLength(30),
      Validators.required,
    ]),
  ],
});

and we supply a formControlName attribute to the input field we want to match each FormControl to in the template:

<ion-input formControlName="username" type="text" required></ion-input>

There are a lot of benefits to creating reactive forms in this manner (rather than just using an [(ngModel)]), and one of those benefits is that it allows us to easily attach Validators to each field - like minlength, maxlength, and required. We explore this concept in more depth in the CouchDB/PouchDB module, but the important point for us in this lesson is that the Validators will mark a specific FormControl as being either valid or invalid. We can then use that valid property to display an error message to the user if the field is invalid.

What we could do is using an *ngIf directive to display an error message to the user if the field is invalid, like this:

<p *ngIf="!registerForm.controls.username.valid">Username is not valid</p>
<ion-input formControlName="username" type="text" required></ion-input>

This is simple enough on a small scale, but quite unmanageable on a large scale. Suppose you have 10 fields in your form, now you have to write these conditions individually for each field. What if you want to display more detailed error? A FormControl will also tell us specifically what validations are failing, but then we would have to hard code messages for each of those into the template.

This is a perfect situation for a custom component. We will be creating a custom component that we will pass the FormControl into, and it will automatically display any necessary errors for us. Once it is complete, we will be able to use it like this:

<app-error-messages
  [control]="registerForm.controls.username"
></app-error-messages>

and we will also be making an improvement over the version we used in the Hangz application - we will add support for supplying custom errors for individual fields, like this:

<app-error-messages
  [control]="registerForm.controls.username"
  [customErrors]="usernameErrors"
></app-error-messages>

By default, each field will just use the generic errors we define in the component like "This field exceeds the maximum allowed length", but if we wanted to provide a custom error for usernames like "Your username is too long" we could.