Angular trigger validation manually

Text version of the video http://csharp-video-tutorials.blogspot.com/2018/03/angular-trigger-validation-manually.html Healthy diet is very important for both body and mind. We want to inspire you to cook and eat healthy. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 Slides http://csharp-video-tutorials.blogspot.com/2018/03/angular-trigger-validation-manually_7.html Angular CRUD Tutorial https://www.youtube.com/playlist?list=PL6n9fhu94yhXwcl3a6rIfAI7QmGYIkfK5 Angular CRUD Tutorial Text Articles & Slides http://csharp-video-tutorials.blogspot.com/2017/12/angular-crud-tutorial.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists 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 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.