Form Controller Status

At the moment, the error messages will appear instantaneously because validation is performed when the component loads. The user hasn’t had a chance to fill out the form. Typically, we want to wait until the user has provided a value before we validate it.

One workaround for this dilemma is to check if the user sends a value as an input. Every form controller comes with various status properties to help us understand what has been done to the input.

Controller statuses

Here’s a list of statuses. They’re all boolean values.

Status	Description
valid	The input is valid.
invalid	The input is invalid.
pending	Validation is still being performed on the input.
disabled	This tells Angular to ignore the value and not to validate it.
touched	The user has focused on the input and clicked out of the element.
untouched	The user has not focused on the element.
pristine	The user has clicked on the field.
dirty	The user has added in a value to the input.

There are a couple of additional things I want to say about the statuses.

First, the pending status is mainly for asynchronous validators, which we haven’t discussed yet. There are two types of validators. The first type is synchronous validators. These are the validators that run synchronously. Examples are the required and minLength validators.

The other type is asynchronous validators. These are validators that run asynchronously. One example would be to check the database if an email already exists. The pending status can be used to check if the asynchronous validator is complete. We’ll look into asynchronous validators later in this course.

The second thing I want to mention is the difference between the touched and pristine statuses. Some students tend to be confused about the difference between them. They both will have an initial value of false. The touched status is set to true if the user clicks on the input and then clicks away from the input, whereas the pristine input will be set to true once the user clicks on the input.

Using the statuses

We can access the statuses from the form controller as properties of the object. We’ll use the touched and dirty statuses to check if the user has interacted on the element AND if they inputted a value. The dirty status will be set to true the moment the value changes on the input.

First, we’ll update the <ng-container> placeholder.

<ng-container *ngIf="ccForm.get('name').dirty && ccForm.get('name').touched && ccForm.get('name').errors">

The element will primarily be displayed if three conditions are true.

1. The input has its initial value changed.
2. The input has been touched.
3. The input’s value has failed validation.

We’ll be doing the same for the ngClass directive on the <input> element for the name.

<input type="text" class="form-control" formControlName="name"
  [ngClass]="{ 'is-invalid': ccForm.get('name').dirty && ccForm.get('name').touched && ccForm.get('name').errors }">

To be honest, adding so much logic in our template makes things look cluttered. We’ll look at how we can clean things up in the next lesson. For now, we’ll leave things as is.

Here’s the updated code: