This is an example of a form in redux in which all the state is kept within the redux store. All the components are pure "dumb" components.
Things to notice:
- No validation errors are shown initially.
- Validation errors are only shown onBlur
- Validation errors are hidden onChange when the error is rectified
dirtyflags are passed with each change
- Except when you submit the form, in which case they are shown for all invalid fields.
- If you click the Initialize Form button, the form will be prepopupated with some values and the
dirtyflags will be based on those values.
Pardon the use of
window.alert(), but I wanted to keep this component stateless.
The circles to the left of the inputs correspond to flags provided by
redux-form: Touched, Visited, Active, and Dirty.
Props from redux-form