Using useValidation for Dynamically Added Forms

[trobic1]

Hi Enterwell team,

We’re using @enterwell/react-form-validation in our React project and love how useValidation works for static forms. However, we’re struggling with applying it to a scenario where we dynamically add form instances.

Problem

We have a feature where users can click a button to add new form instances to a list (e.g., a list of forms stored in a state array). Each form has fields like name (validated with isNonEmptyString) and type (validated with isNonEmptyArray). We want to validate all fields across all forms when the user submits, but we can’t call useValidation dynamically (e.g., inside a button click handler) due to React’s hook rules.

Currently, we’ve implemented a custom validation solution, but we’d prefer to use @enterwell/react-form-validation for consistency with other parts of our app.

Desired Outcome

We’d like to:
Dynamically add form instances on button click, each with fields validated using useValidation.
Validate all fields in all form instances at once (e.g., with a validateAll function) to check for errors and display them in the UI.

Questions
Is it possible to use useValidation for dynamically added forms while respecting React’s hook rules?
What’s the recommended approach for managing a list of forms and validating all their fields together?
Are there any examples or patterns for this use case with your package?

[trobic1]

I've found a solution for using @enterwell/react-form-validation with dynamically added form instances while respecting React's hook rules. I'm sharing the steps here for anyone else who runs into a similar issue.

1. Encapsulate Each Form in a Reusable Component: Create a FormRow component for a single form instance. Inside it, use useValidation to handle fields like "name" (with isNonEmptyString) and "type" (with isNonEmptyArray). This keeps hook calls consistent and rule-compliant.
2. Expose Validation References: In FormRow, use useImperativeHandle to expose a validate method that triggers validateFields. Pair this with a RefObject for each instance to access it from the parent.
3. Manage Form Instances in Parent State: In the parent, use a state array (e.g., formInstances) to hold form data and refs. When adding a new instance on button click, push a new object with default values and a fresh RefObject.
4. Implement Unified Validation: In the parent, create a validateAll function that loops through the array, calls validate on each ref, and collects results. Use this on submit to check all forms, update error state, and show issues in the UI if needed.

This keeps everything clean, scalable, and aligned with React best practices.