The following table summarizes the CSS classes that the framework adds to the form controls during their lifecycle:

Classes Description
ng-untouched The control hasn’t been visited
ng-touched The control has been visited
ng-pristine The control’s value hasn’t been changed
ng-dirty The control’s value has been changed
ng-valid All the validators attached to the control have returned true
ng-invalid Any of the validators attached to the control has a false value

According to this table, we can define that we want all the input controls with invalid value to have a red border in the following way:

input.ng-dirty.ng-invalid {
  border: 1px solid red;
}

The exact semantics behind the preceding CSS in the context of Angular 2 is to use a red border for all the input elements whose values have been changed and are invalid according to the validators attached to them.

Now, let’s explore how we can attach different validation behavior to our controls.