Angular trigger validation manually

Suggested Videos
Part 25 - Angular custom validator example template driven forms | Text | Slides
Part 26 - Angular select list required custom validator | Text | Slides
Part 27 - Angular password and confirm password validation | Text | Slides

In this video we will discuss

1. How to add or remove validation styles to a group of elements in Angular
2. How to trigger validation manually in Angular using the updateValueAndValidity() function

This is continuation to Part 27. Please watch Part 27 from Angular CRUD tutorial before proceeding.

How to add and remove validation styles to a group of elements in Angular : Use the ngModelGroup directive and group the elements. Now we can add or remove validation styles from the group. This in turn adds or removes the validation styles from all the elements in that group.


In our case, we want to group password and confirm password fields to be able to control their validation styles. Notice in the example below, both password and confirm password fields are grouped using the ngModelGroup directive. The bootstrap validation class has-error is conditionally added or removed from the group.

<div ngModelGroup="passwordGroup"

     [class.has-error]="confirmPassword.touched && confirmPassword.invalid">

  <div "passwordFieldDiv"> ...

  </div>

  <div "confirmPasswordFieldDiv"> ...

  </div>

</div>

Use of updateValueAndValidity() function : At the moment we have a problem with confirm password field validation. It does not work in one of the scenarios. Here is the scenario.

If you first change PASSWORD field and then the CONFIRM PASSWORD field, the validation works as expected. Now if you go back and change the PASSWORD field, the validation will not be triggered and you will not see the validation error even if the passwords do not match.

This is because our custom validation directive is applied on the confirm password filed but not on the password. So our custom validation is triggered only when the confirm password field is changed and not when the password field is changed. To make this work, even when the password field is changed, we have to tell confirm password field to run it's validation when password field is changed.

So the obvious question that comes to our mind is, how to tell the confirm password field to run it's validation?
Well updateValueAndValidity() function comes to the rescue. When this method is called on a control, that control's validation logic is executed again. Notice the event binding in the example below. The change event of the password field triggers a call to confirm password field's updateValueAndValidity() function. This in turn runs the confirm password field validation.

<input name="password"

      (change)="confirmPassword.control.updateValueAndValidity()" …>

The change event is fired only after the form control has lost focus. The input event is fired as the user changes the value. So if you want the validation to trigger as the user is changing the value, use the input event instead of change event.