AngularJS Validate all forms on application load

Question

My application has a left nav with symbols showing next to each link to indicate whether that page's form is valid. As the user clicks from page to page, Angular validates the form and the correct symbol displays. I now have a requirement to show the validation symbols immediately when the user enters the application, rather than requiring the user to visit each page to see whether it is valid or not. Is there any way to manually trigger each form to validate, while still utilizing Angular's built-in form validation? One idea I had was to programmatically navigate to each page to initialize and validate each form. So far that hasn't worked for me using AngularUI Router's $state.go, but I will play around with it some more. Any other ideas? Thanks!

Answer 1

My initial solution was to inject the HTML for all the forms into a parent view and make them hidden so that they are in the DOM when the app loads and are validated immediately. This worked, but had some issues with the validation flickering from valid to invalid and it impacted performance due to the large DOM.

The better solution I landed on was to scrap the built-in Angular validations and create my own validation function. The validation function gets called in my controller on initial app load and also from a directive so that the field's validity is updated as the user changes input. This solution was simple to implement once I convinced myself I wasn't gaining much by using Angular's built-in validations.