http://csharp-video-tutorials.blogspo...
Slides
http://csharp-video-tutorials.blogspo...
Angular CRUD Tutorial
https://www.youtube.com/playlist?list...
Angular CRUD Tutorial Text Articles & Slides
http://csharp-video-tutorials.blogspo...
All Dot Net and SQL Server Tutorials in English
https://www.youtube.com/user/kudvenka...
All Dot Net and SQL Server Tutorials in Arabic
https://www.youtube.com/c/KudvenkatAr...
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.
asp.net core docker Angular trigger validation manually | |
112 Likes | 112 Dislikes |
17,660 views views | 524K followers |
Science & Technology | Upload TimePublished on 7 Mar 2018 |
Related keywords
tutorialspoint,tutorials dojo,central park 5,asp.net core github,craigslist nj,asp.net core 3,server status,server jobs nyc,asp.net core swagger,credit karma,services group,tutorials by hugo,server error in '/' application,servers for minecraft,asp.net core dependency injection,services windows,asp.net core 3.0,tutorialspoint c#,services angular,calculator,tutorialspoint tableau,services google play apk,asp.net core 3 release date,server job description,tutorials by a,servicenow,tutorialspoint python,services briefcase,asp.net core web api,craigslist ny,server pro,server status ffxiv,cheap flights,server memes,asp.net core hosting,services sas,services online,chase,tutorialspoint java,serverless architecture,tutorialspoint java compiler,server resume,server books,tutorialspoint javascript,services technologies gps,college football,server jobs,cvs,cnn,costco hours,tutorialspoint sql,server side rendering,tutorialspoint spring,serverless,tutorialspoint spark,asp.net core download,cool math games,services & training hse colombia sas,servicestack,citibank,asp.net core identity,asp.net core logging,tutorialsystems,cunyfirst,services fms publish announcement,services.msc no abre,asp.net core razor pages,server duties,asp.net core environment variables,tutorials near me,server 2019,chernobyl,century 21,serverminer,services consultores,services consulting,services.msc,asp.net core configuration,asp.net core tutorial,asp.net core mvc,server hosting,chase online,costco,server jobs near me,capital one,server rack,tutorialspoint html,craigslist,tutorialsteacher,tutorialspoint reactjs,asp.net core 2.2,services desk,tutorialspoint python 3,services transmission company sas,asp.net core signalr,services manager,tutorialspoint spring boot,asp.net core middleware,services tag dell,
Không có nhận xét nào:
Đăng nhận xét