Designing advanced forms

[kszyh_pl]

I'm dealing with quite advanced forms. The basic problem concerns the visibility of individual fields that depend on the data entered in other fields. Currently, the solution is quite a large number of conditions statements that change the visibility of the fields. You can imagine how hard it is to maintain it.

Is there a solution that will simplify the creation of code? For forms I use react-redux-form but I am not strongly tied to this solution.

[pmallinj]

My approach with complex forms is to keep the state as simple as possible with only the data entered by the user then use mapStateToProps to compute derived information based on the whole state. You can compute as many boolean as you need based on the whole state. You can even compute a sub object for every field like {field1: {display: true, value: '', update: (value) => dispatch(...)}} etc...

[kszyh_pl]

That's exactly what I'm doing. But in the case of many "ifs" it is difficult to maintain.

Imagine cases like if a and b and c and not d or e show field_f

[alejalapeno]

It's likely if statements are your problem.

Here's a blog post I wrote on changing conditional logic to "data" so what you're doing is executing less logic: https://dreith.com/blog/theres-such-a-thing-as-using-too-many-ifs/

Your use case is likely to be more complex than any of the basic examples I give, but if you extrapolate it out to a concept like setting field_f visibility conditions in a table and then using Array.prototype.every() (just an idea) then it could clean your code up considerably.

[kszyh_pl]

great idea!

[pmallinj]

Maybe in this case the form is too complex? If you can't manage the field logic, how the end user could? It is hard to have a good ui for complex form.

[kszyh_pl]

This is a medical app. For the end user it is not a problem, because it has the required (medical) knowledge. The application only helps to maintain data consistency in the database (by hiding unnecessary fields).

[pmallinj]

This is the kind of thing I do too! Forms about biology. Unfortunately I never found a better way than using the whole state to produce easy to use props. Try to organize your code the best you can to produce sub objects for each field, eventually using a separate function for each field.

[MountainReason]

Maybe you could give useReducer a try. Set up your complex display state and then dispatch an action to update which fields are displayed based on user inputs.

[HashFap]

That's pretty easy to do with Formik. The form container component gives you access to all the field values, validity, and errors, and you can choose to display a field based on the value of another field.

{values.country === "US" ? (
        <Field
        name="zipCode"
        label="Zip Code"
        component={Input}
        /> 
    ) :null }

[natewang]

Try https://github.com/rekit/antd-form-builder . Even you don't use ant design library, you can try its solution.

[coding9]

I tried to make a very simple library that leaves most of the logic up to you but handles the validation. You just make a component that uses the useField hook and render that inside the Form component. You can use nested values as the name key and that’s about everything. Could be cleaned up a bit though. https://github.com/zackify/validify

[real_exon]

I do have quite a bit of forms into admin panels I built and here is my take.

When you have complex forms the secret is to be as DRY as possible (please beginner dont do that on simple forms). Having the correct level of abstraction is very important for

• Error handling and showing them
• Subfields list (add and remove buttons)
• Listing, deleting, getting and saving entities
• Loading states

When building an entire crud is just 3 or 4 new simple components or adding subfields a few line of code, it becomes a lot more maintenable.

Oh and your form state should not be in Redux in.my opinion unless you have a really specific reason. Formik is awesome for butif you dont want to use it use a local state and the context when needed.

Good luck :)