1. Displaying Form Validation Info
Microsoft Virtual Academy
Header
Mastering Angular, Part 8
Displaying Form Validation Info
Eric W. Greene
Produced by

2. Agenda In this session Displaying Form Validation Information
WintellectNOW
11/10/2018 4:54 PM
Agenda In this session
Displaying Form Validation Information
Techniques for Communicating Validation Information to Users
Getting Started with Angular
Demo: Setting Up the Angular Starter Application
Displaying Validation State via Controls
Demo: Using CSS to style Valid and Invalid Controls
Displaying Validation State via Messages with CSS
Demo: Using CSS Combinator Selectors to Show/Hide Validation Messages

3. WintellectNOW
11/10/2018 4:54 PM
Agenda In this session
Using the Form Control Object Tree to Access Validation Information
Demo: Using Template References and View Child with Template Forms
Demo: Using the Form Control Object tree with Reactive Forms
Displaying a Validation Summary
Demo: Collecting Errors from Many Controls and Displaying a Summary
Enabling / Disabling Form Controls
Demo: Disabling the Submit button when the Form is Invalid

4. Displaying Form Validation Information Overview
WintellectNOW
11/10/2018 4:54 PM
Displaying Form Validation Information Overview
In previous videos of this series, Reactive Forms, Template Forms, Validators, Custom Validators and such have been explored, explained and demonstrated
While all of that information is great, at the end of the day the tracked validation information needs to be presented to the user so they can correct their forms, and the data can be submitted
Displaying this validation information can be challenging depending upon the complexity of the form and other factors
This video will look at some of the ways the CSS classes and Form Control object tree can be used to present validation information

5. Techniques for Displaying Validation State What's Available?
WintellectNOW
11/10/2018 4:54 PM
Techniques for Displaying Validation State What's Available?
Angular Forms makes validation state information available through CSS classes on the control elements, group elements and form element of the form
Additionally, a Form Control object tree mirroring the form structures is maintained in the JavaScript environment
Both CSS classes and the Form Control object tree can be used with both Template Forms and Reactive Forms

6. WintellectNOW
11/10/2018 4:54 PM
Techniques for Displaying Validation State Advantages / Disadvantages of CSS
Using CSS is more efficient than using the Form Control object tree with directives such as NgIf
Defining and applying styles for the CSS classes to communicate validation information is faster than JavaScript based Angular bindings and DOM manipulation
Using CSS is harder for developers with little experience working with CSS, especially combinator selectors
CSS does not remove hidden content from the DOM, its just hides it from view by the user

7. WintellectNOW
11/10/2018 4:54 PM
Techniques for Displaying Validation State Advantages / Disadvantages of Form Control tree
Referencing the tree and applying Angular bindings to show/hide validation messages is easy for most web developers
More complex error handling can be accomplished through JavaScript coding
DOM structures can be removed, not just hidden from view
Additional bindings and JavaScript logic can impact the performance of the component
The additional directives and logic within the template can make it less clean to work with

8. WintellectNOW
11/10/2018 4:54 PM
Techniques for Displaying Validation State Template Forms and the Form Control Object tree
When working with Reactive Forms, the Form Control Object tree is available as part of the form creation
With Template Forms, the Form Control Object tree is present but hidden
To access it, either template references or View Child can be used

9. Techniques for Displaying Validation State Template References
WintellectNOW
11/10/2018 4:54 PM
Techniques for Displaying Validation State Template References
Template references are configured with a hash tag following by a short name on the element upon which the reference is desired
A reference by itself creates a template variable (without the hash tag) which points to the DOM object
A reference assigned the name of a directive (such as ngForm, ngModelGroup or ngModel) creates a template variable which references the directive instance wrapping that particular Form Control object
For simple scenarios this works great, but too many template reference variables can clutter up the template
Also, template references cannot be referenced in the component class

10. Techniques for Displaying Validation State View Child
WintellectNOW
11/10/2018 4:54 PM
Techniques for Displaying Validation State View Child
Angular Components provide a feature named Queries which allows directives in the component UI to be queried
Queries are not typically used directly, instead helper decorators are used to access these directives
To query directives defined as part of the component's template, the decorators ViewChild (one result) and ViewChildren (many results) are use
The directive's type or selector may be used to query the component's UI
ViewChild requires more setup, but keeps the template clean, and allows the directive instance to be used within the class

11. Techniques for Displaying Validation State Recommendations
WintellectNOW
11/10/2018 4:54 PM
Techniques for Displaying Validation State Recommendations
Use CSS for showing / hiding simple error messages and validation summaries
Use CSS for highlighting invalid controls and groups
Use JavaScript for collecting validation summary data and displaying dynamically generated error lists
Use JavaScript for parts of the DOM which should be removed for particular validation states
Opt for CSS, and when more power is needed, use JavaScript
With Template Forms, use Template References for simple validation scenarios, use View Child(ren) for more complicated scenarios

12. Getting Started with Angular Project Setup
WintellectNOW
11/10/2018 4:54 PM
Getting Started with Angular Project Setup
Angular applications require some initial project configuration to get up and running
There are many ways to get started
Angular CLI
Numerous Starter Projects
From Scratch
This course will use a starter project configured with WebPack 2
The WebPack development server will serve the web pages, and WebPack will bundle the application files

13. Getting Started with Angular Project Setup
WintellectNOW
11/10/2018 4:54 PM
Getting Started with Angular Project Setup
The initial starter project can be downloaded from GitHub
Git is not required, simply fire up a web browser, and visit the following link
In the demonstration we will download, configure and fire up the project

14. Demo Setting Up the Angular Starter Application WintellectNOW
11/10/2018 4:54 PM
Demo
Setting Up the Angular Starter Application

15. Displaying Validation State via Controls CSS Classes and Controls
WintellectNOW
11/10/2018 4:54 PM
Displaying Validation State via Controls CSS Classes and Controls
The easiest form of validation display is to style the controls themselves directly
For example, an invalid input control could be given a red border
When styling a control, it's common to define the CSS selector to match controls with both the ng-invalid and ng-touched, this allows the user to attempt to enter data into the control before displaying an error message
Also, a successful validation style can be applied with ng-valid

16. Demo Using CSS to style Valid and Invalid Controls WintellectNOW
11/10/2018 4:54 PM
Demo
Using CSS to style Valid and Invalid Controls

17. Displaying Validation State via Messages with CSS CSS Combinators
WintellectNOW
Displaying Validation State via Messages with CSS CSS Combinators
11/10/2018 4:54 PM
With CSS Combinator Selectors its possible to display messages in other elements near a control
For example, the sibling element selectors "+" and "~" can be used to show error messages for a span which is a subsequent sibling of an input element marked with the ng-invalid and ng-touched classes
If an error message element is a child element of a subsequent sibling element to the input control, then the " " and ">" combinators can be used
Error Message elements cannot be parents of the input control, they cannot be previous siblings of the input control

18. Demo Using CSS Combinator Selectors to Show/Hide Validation Messages
WintellectNOW
11/10/2018 4:54 PM
Demo
Using CSS Combinator Selectors to Show/Hide Validation Messages

19. WintellectNOW
11/10/2018 4:54 PM
Using the Form Control Object Using JavaScript Objects to Update the UI
As discussed earlier, there are several ways to interact with the underlying JavaScript objects
Typically, Form Control objects are used with directives such as NgIf, NgSwitch and NgFor to modify the DOM structure based upon the validation of the objects
The objects can be referenced via template references (hash tag in the template) and on the component object (Reactive Forms, View Child(ren))

20. Demo Using Template References and View Child with Template Forms
WintellectNOW
11/10/2018 4:54 PM
Demo
Using Template References and View Child with Template Forms

21. Demo Using the Form Control Object tree with Reactive Forms
WintellectNOW
11/10/2018 4:54 PM
Demo
Using the Form Control Object tree with Reactive Forms

22. Displaying a Validation Summary Improving Usability for Large Forms
WintellectNOW
11/10/2018 4:54 PM
Displaying a Validation Summary Improving Usability for Large Forms
For small forms, inline validation markings and messages are helpful
For larger forms, scrolling up and down looking for inline error indicators can be difficult, especially if the user is in a hurry
Providing a Validation Summary is a great way to communicate to the user what is invalid
There is no built-in in mechanism for collecting error messages and displaying a validation summary
Nevertheless, it is possible to traverse the Form Control object tree and collect the errors, and then display them with NgFor at the top of the form

23. Demo Collecting Errors from Many Controls and Displaying a Summary
WintellectNOW
11/10/2018 4:54 PM
Demo
Collecting Errors from Many Controls and Displaying a Summary

24. WintellectNOW
11/10/2018 4:54 PM
Enabling / Disabling Form Controls Changing Controls with Respect to Validation State
In addition to displaying information related to the validation status, it's possible to show/hide or enable/disable controls such as buttons
When changing controls with respect to the validation state of other controls it helps to limit the options of the user in an effort to guide them to a valid form
Generally, template bindings are preferred to CSS classes as removing the button is more limiting then simply using CSS to hide (keep in mind users have access to browser developer tools as well)

25. Demo Demo: Disabling the Submit button when the Form is Invalid
WintellectNOW
11/10/2018 4:54 PM
Demo
Demo: Disabling the Submit button when the Form is Invalid

26. Conclusion Next Steps…
WintellectNOW
11/10/2018 4:54 PM
Conclusion Next Steps…
In this course, the displaying of form validation information in UI was explored
CSS Classes and Form Control objects can be used to display validation information
CSS Classes work with Template Forms and Reactive Forms
With Template Forms the Form Control objects can be access via template references and View Child(ren) component queries
Validation Summaries can be constructed from From Control objects
For more information on Angular Forms, please watch the other videos in the series on Reactive Forms, Template Forms, Form Validation, etc…