Angular: Template-Driven Form Validation

Описание: Validating a Template-Driven Form in Angular is similar to how it works in a Reactive 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.

⭕ 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/...