Form handling with Elements v3.x

[nroper]

Summary We are in the process of converting existing forms from Elements v2 to v3 components and would be grateful for some clarification and advice regarding some aspects of v3 form handling.

Detail and or supporting links and screenshots

At present we're using the Reapit/Formik components to handle initial values, validation and error display for form components. The Reapit/Formik elements are currently still available via Elements 2.3.0, but are not part the v3 library that's included in the 2.3.0 release.

At some point we assume that we will move to a v3-only installation, in which case the original Reapit/Formik elements would no longer be available, so we don't want to be dependent on them.

It would help to understand how Reapit would recommend replacing the existing Formik functionality for initialising values, applying validation and handling error display etc. in a v3-only environment.

We can't find any examples of input, validation or error handling/display in the v3 Elements documentation, so would the expectation be that we implement this functionality ourselves, using native html5 attributes and handlers for example, or is there something in the documentation that we've overlooked?

Thanks

[github-actions[bot]]

This issue has recently been assigned to our ‘Front-end’ project board for review. All issues are reviewed in a weekly refinement session and where applicable, a comment and associated label will be added. If required, we will add a technical specification to the ticket. Please take the time to review the information. When we're ready to schedule the issue, it will be moved to the relevant column where you can continue to track its progress to completion. For more information on our processes, please click here

[willmcvay]

Hi @nroper so we have the same issue internally. Basically, the rule is all v3 form Elements are "just inputs" and as such, should work with any form lib. We have tested them with both React Hook Form and Formik.

This is an example of a v3 MultiSelect input working within the context of a v2 Formik form https://github.com/reapit/foundations/blob/master/packages/developer-portal/src/components/pages/edit-app/reapit-products-section.tsx#L42

As you can see, you just import the Field component from v2 elements https://github.com/reapit/foundations/blob/master/packages/developer-portal/src/components/pages/edit-app/reapit-products-section.tsx#L2 and wrap around the v3 component. This approach will work with Inputgroup, Input, Select and so on from v3 also. The whole idea was to be as library agnostic as possible with v3.

Works as expected, you shoudn't need to refactor any further.

[nroper]

Thanks @willmcvay - so is the assumption that the the existing v2 Formik components etc. will 'always' be available in future versions of reapit/elements?

[willmcvay]

@nroper No, they are removed in v3, they will remain in v2. V3 components are included in v2 to allow incremental migration.

If you want to use Formik in v3 you can just npm install it as normal and import Formik direct from the lib rather from elements.

[willmcvay]

@nroper Can I close this one off now or is there anything else?

[nroper]

@willmcvay could you keep it open for a while longer? We tried importing Formik and using it as you suggested, but got some errors. Will take another look later today or over the weekend.

[willmcvay]

Sure, no worries

[nroper]

@willmcvay we have something working on this now.

[github-actions[bot]]

It looks like you have commented on a closed issue. If your comment relates to a bug or feature request, please open a new issue, and include this issue number/url for reference. For more information on our processes, please click here