You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
To trigger the validation once the addressNL component has changed, we have to monitor formik changes. Using the `dirty` property from the `useFormikContext` we can simplify this monitoring. Unfortunately we can only set/alter the validation on the top level. With this we have three options:
- We can add `onBlur` properties to all addressNL fields. This means that we can handle formValidation after blur, and only when `dirty === true`. This would add a lot of custom properties and logic, for a small 'problem'. This would also move us futher from a "the component functions on its own" way of working.
- We can add `onBlur` eventListeners via `useEffect`. This would give us the same functionality as the previous option, without all the custom properties. It would also make the addressNL component even more complex and introduce unexpected behavior.
- Finally we can change the validation rule based on the `dirty` property. For this to work, we would have to pass the `dirty` prop to the parent component, to then change the validation rule. It is a strange way to work, but would mean the least amount of custom behavior and keep the validation process understandable.
For simplicity sake, I've chosen the last option. To use the `dirty` prop from the formik context to change the addressNL component validation
0 commit comments