How to do form validation across multiple tabs that validate with FormGroup
I'm developing an Angular2 workflow app that collects data on multiple tabs, customizing the fields on each tab based on prior tabs' values, and then validating that all tabs are filled out correctly along the way. I'm using the Angular2 router to control which tab component displays, and each tab uses FormGroup to handle form validation. (See below for a visual idea of component hierarchy and how the app works.) I need an elegant way to compute the validity of data across all tabs in the workflow, without having to open each tab to activate its controller and FormGroup validators. Ideally, the workflow validation for a tab will use the same logic as the tab's FormGroup validation, to keep things DRY and consistent.
As users touch fields I log the tab's "dirty" state in the DB, so I don't have a problem knowing when a tab is pristine/dirty. The challenge is, when a user returns to a previously-saved workflow, how do I compute the valid/invalid state for all tabs' data, when the user hasn't yet touched the FormGroups on those tabs?
Thanks for any suggestions for design patterns that can accomplish this!
A few design details:
- One route component handles each step of the workflow.
- Each route component uses a FormGroup to handle form validation.
- Form validation on all tabs need to drive the valid/invalid indicators for all workflow steps, shown in the header's .
- A tab can be in one of three possible states: Pristine (gray check: the user hasn't touched any field on the tab yet), Incomplete (red exclamation: the tab has been touched and one or more fields on the tab are invalid), Valid (green check: all required fields contain valid values.
In working on this problem, I am finding that the solution requires higher-level architectural choices about state management and how to handle & display the app's data. Unfortunately for me, there wasn't a single technical solution, like "Use this Angular2 library design specifically to validate fields across multiple FormGroups in different components!" :(
I hope our research is helpful for somebody else, my team is taking a Redux approach using the npm modules ngrx-store & ngrx-effects for Angular2. All of the app's data & state processing logic (including validation across multiple tabs-- my initial challenge) will be handled by Redux actions & reducers. A beneficial side effect is that our view controllers become super simple, and just display the data ngrx gives them. This eliminates complex, conditional logic that depends on state of data entered in other areas of the app.
Egghead.io has a useful 10 minute video that introduces the ngrx library & design patterns.
I hope this gives you a leg up. Good luck!