Search code examples
javascriptreactjsreact-final-form

Grouping and validating fields

We have a form that has fields grouped into screens (sections). This separation is only done visually. The screens are named and listed (always visible) on the left side of the screen. The screen name is white if that is the section currently visible. If there is an error on some field, the screen name is marked red, so you always know, which section has an error. This behavior is implemented in each screen component (not optimal at all). mockup

Client-side validation works nice (is not always implemented via validators yet). But now I want to implement the same behavior, if we get an error from the API. Meaning screen name is red if a field has a submission error, and not red when that field has been edited.

Basically I need to group the input fields into a Screen component that subscribes to each fields error, submitError and dirtySinceLastSubmit. Then I need to define a new state variable valid in this Screen component, that checks all child state and sets the appropriate value based on each child state.

Is it possible, to group fields in react-final-form and subscribe to child state changes?

Solution

  • I might consider breaking them up into separate forms and managing the total form values in a parent component, like in the Wizard Example. Your other option is to subscribe to sets of fields with something like this:

    Edit blissful-silence-qv7sd

    It's slightly technically naughty and the hooks lint rule will complain, but as long as you never change the list of fields, you should be fine.