Handling Nested dynamic fields - one place for all duplicate issues like this, hopefully 😅

[ypahalajani]

Need some advice!

My use case scenario 😬

The form fields in my form are dynamic in the sense that the number of fields inside the formik's <Form /> are dynamic -> the parent fields render their own dependents(fields) based on the parent field's value (at the same flat level as of now - not nested).

How I plan to solve this 🚀

Now, to validate this I have the precisely clear two ways -

• Either use yup (of which I am a huge fan of)
• Validation function (custom validations - form-level as well as field-level or even trigger manually).

I plan to keep field level validations because, this way, my fields (are of 12 types right now) individually know their own validations. My form does not worry about dynamic additions to it because the new entries render with their validations.

What I also considered 😇

But, since I ❤️ using yup validation schema with formik, I already did a POC to generate a dynamic validation schema for the fields and it works.

Because the next requested feature (rendering dependent fields) involves dynamically changing the fields, I'll have to maintain the schema in the state of my component so that I can dynamically update this when the fields (that will also be a part of component's state) update.

What do you think 🤔

Is it a good idea to use yup in formik when my validation schema is continuously updating every time a prop/state variable is updating on which the schema is dependent?

P.S. If the title seems like a clickbait, then, trust me, I have gone through a lot of click baits while searching on google, StackOverflow, github, Medium blogs... 😛

Edit:

Previously the title of this discussion was Dynamic validation schema - it's not what it seems
After some more searching (searching things on google is endless 😛), I had to change the title.

[leup]

I think I am very interested in your solution ! :)

[leup]

Any news ? I am working on a dynamic form right now and I would very much like to take a look at your example.

[ypahalajani]

Hey @leup , Apologies for not posting a solution here. Actually, while implementing that flow for forms in my company's product, I forgot to upload a solution here.

I'll ensure that by tomorrow or at max - the day after tomorrow (in IST timezone) - I'll post a sample on codesandbox here.

I'll write a fresh example for easy understanding for others who visit this solution.

I've written some text below describing what my implementation would do. In the meanwhile, you may go through it while a post a link for the same.

[leup]

No worries @ypahalajani. For the matter, I managed to implement a multi-step dynamic and configurable form with a button to add some new (clone) field to the form. It was.. hell. But in the end I have something that seems to work.
My main concern now is that there is a LOT of re-renders but I think there is no other way right now without a better refactor.
Would be very happy to compare with your solution.

[ypahalajani]

@leup I was busy with an urgent customer requirement from the office over the weekend 😅

Here you go: A working sample solution - that fits my use-case for rendering nested dynamic fields

Feel free to ask any questions here or DM @ twitter

[leup]

Thanks, I will take a look ! :)

[jaredpalmer]

Hey! So this is a great question. There is no silver bullet here.

If you find it easier to use field-level validation, then do it. It can be nice to colocate validation where you make the decision about what to render. It’s really useful when fields are added / removed like the situation you described, but also rely on some kind interim state or side effect that is not accessible to Formik’s validate or validationSchema’s function scopes.

Another approach is to write a function that returns a validation function or validation schema. This works well when you can derive/predict all validation from just the values and state/props above your form (and guarantee that no keys are going to be added that you can’t predict ahead of time). If you have dynamic stuff that is dependent of some state/effect that you can’t somehow lift above Formik or predict the validation of, then form-level validation won’t easily work for that. This is rare though.

Luckily, even if you do find yourself in that situation, you can also combine form-level and field-level validation in the same form. Just be aware that the results will be deeply merged.

Hope that helps!

[ypahalajani]

Hey, thanks for such an amazing reply!
Read every bit of it.
I did not think of this before - combining form and field level validations 👌

My most recent working solution to this use case:

For now, I have 12 known types of components(i know this number can change any time).
I have created a wrapper component that "formifies" the component (wrap my component inside <Field/>) and render them inside <Formik/>'s children.

Also, you know what - I wrote the validations in yup for each of these component types and inside the validate function for each of these fields I call a function that returns yup validation schema based on the type of the component.

The different component types already know what to render.
And, now, their component files expose/export a function that returns yup validation schema for that type.

Field-level validations are working perfectly as intended.
And, this way, my form can now easily accommodate a new type in the near future 😎