Angular: Reactive Form Validation

Veröffentlicht am: 11 April 2020
auf dem Kanal: Christian Hur

235

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

Auf dieser Seite können Sie das Online-Video Angular: Reactive Form Validation mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Christian Hur 11 April 2020 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 235 Mal angesehen und es wurde von 2 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

1,090