Angular: Reactive Form Validation

Publié le: 11 avril 2020
sur la chaîne: Christian Hur
235
2

Validating a Reactive Form in Angular is similar to how it works in a Template-Driven Form. The properties and control status CSS classes are the same. There are seven (7) useful CSS classes you can use in Angular:

🔹 ng-pristine (data in the form field has not changed)
🔹 ng-dirty (data in the form field has changed)
🔹 ng-valid (all requirements are met)
🔹 ng-invalid (at least one requirement is not met)
🔹 ng-touched (a field has been clicked or touched)
🔹 ng-untouched (a field has not been clicked or touched)
🔹 ng-pending (pending state of a input with async validation)

There are more than the ones mentioned above (e.g. ng-empty, ng-not-empty). Using these classes can display useful messages to help users fill forms properly to ensure that your forms are validated instantly.

*** Note: At 12:22: The error messages did not show because the [disabled]="myForm.invalid" was not removed from the button tag. The "myForm" was not used at this point of the video.

⭕ About me
I am a Web Instructor at a technical college, Facilitator at Boston University Metropolitan College, Web Instructor at University of California, Irvine - Division of Continuing Education. I’ve authored a textbook and a few video training courses for http://lynda.com (  / learning  ) and http://www.packtpub.com.

⭕ Check out my author page: http://amazon.com/author/christianhur
⭕ My complete online training courses:
☑️ The DOM in JavaScript, jQuery, AngularJS, and React :   / the-dom-in-javascript-jquery-angularjs-and...  
☑️ Building JSF Web Applications with Java EE 7:   / building-jsf-web-applications-with-java-ee-7  
☑️ Troubleshooting Vue.js: https://www.packtpub.com/application-...
☑️ Angular 7 New Features: https://www.packtpub.com/web-developm...
☑️ Full-Stack Web Development with Flask: https://www.packtpub.com/web-developm...
☑️ Full-Stack Web Development with Django & Angular 8: https://www.packtpub.com/web-developm...

⭕ Check out my book:
Developing Business Applications for the Web: With HTML, CSS, JSP, PHP, ASP.NET, and JavaScript is available on Amazon and MC Press.
☑️ Link: https://www.mc-store.com/collections/...


Sur cette page du site, vous pouvez voir la vidéo en ligne Angular: Reactive Form Validation durée heure minute seconde en bonne qualité , qui a été Téléchargé par l'utilisateur Christian Hur 11 avril 2020, Partagez le lien avec vos amis et connaissances, sur youtube cette vidéo a déjà été regardée 235 fois et il a aimé 2 téléspectateurs. Bon visionnage!