Angular 2 (Angular 4) - Form Validation Messages
Angular 2 (Angular 4) - Form Validation Messages
In this video we take a look at implementing angular 2 validation message in our app component code instead of directly in our HTML as we used to do in AngularJS.
Point being we may wish to test our validation logic at a later date, as well as keep our HTML clean, which is something AngularJS caused issues with over time. We also take the bootstrap css for validation errors and apply them to the ng-invalid class in our component stylesheet.
We also look at the ngAfterViewChecked lifecycle event to be able to subscribe into being able to monitor changes to the input controls, so we can update validation messages based on any changes to our input controls on the form.
To follow along with this tutorial please clone down the following branch, then checkout the tutorial12 branch. If you wish to see the final result, check out the tutorial13 branch.
https://github.com/lyraddigital/angul...
You can follow me on twitter at: / dduckmanton82
You can also follow my business account at: / lyraddigital
You can also follow my business account on Facebook at: / lyraddigital
I publish an article every now and then on LinkedIn as well. So connect with me on LinkedIn at: / daryl-duckmanton-4478a14a
Watch all my other videos in this series:-
Part 1 - Introduction and the CLI: • Angular 2 (Angular 4) - Introduction ...
Part 2 - Angular Module Basics: • Angular 2 (Angular 4) - Angular Modul...
Part 3 - Multiple Angular Modules: • Angular 2 (Angular 4) - Multiple Ang...
Part 4 - Shared Angular Modules: • Angular 2 (Angular 4) - Shared Angul...
Part 5 - Eagerly and Lazily Loading Modules: • Angular 2 (Angular 4) - Eagerly and ...
Part 6 - Basic App Component and Presentation: • Angular 2 (Angular 4) - Basic App Co...
Part 7 - App Component bindings: • Angular 2 (Angular 4) - Component bin...
Part 8 - Attribute binding and the main navigation: • Angular 2 (Angular 4) - Attribute bin...
Part 9 - Basic Form and Dual Binding: • Angular 2 (Angular 4) - Two Way Binding
Part 10 - Registration Form Part 1: • Angular 2 (Angular 4) - Creating Forms
Part 11 - Registration Form Part 2: • Angular 2 (Angular 4) - Dynamic Form...
Part 12 - Registration Form Part 3: • Angular 2 (Angular 4) - Form Validation
Part 14- Registration Form Part 5: • Angular 2 (Angular 4) - Reactive Forms
Part 15 - Structural Directives: • Angular 2 (Angular 4) - Structural Di...
Part 16 - Dynamic Forms: • Angular Dynamic Forms (Angular 7) pre...
