There is a scenario of edit, where we have a very long form which fetches data from multiple sources for each section which is inside accordions. We fetch and auto-populate the data only when an accordion is expanded, else we don't need to send it back for modification. The requirement is to support this kind of form edits, where we can set initialValues for different fields independently even after the initial form load while also preserving the correctness of isDirty, isTouched properties. Be aware that the form data on submit might be partial as we want to load partial and send back only what was was modified.
Current Behavior
I experimented with enableReinitialize prop on Formik. Indeed, we can set initial Values at a later point of time after an async load. But it overrides all the edits as well.
Desired Behavior
To set initialValues of only a desired field such that the form edits are not lost for other fields.
Suggested Solution
If it can be possible to set it at the filed level additionally. isDirty can also be provided at field level in addition to form.
e.g. -
field.setInitialFieldValue(newValue )
Who does this impact? Who is this for?
It can be useful for long and async loaded forms to be able to use out of the box solution from Formik in case of 'modify' forms.
Describe alternatives you've considered
I did it by using state management and creating my own copy of initialValues which is modified each time we async load a field. It works but does look verbose and doing a lot things what could be possibly provided natively by Formik. At, submit we compare formik values and our state. isDirty is of course not useful anymore.
Feature request
There is a scenario of edit, where we have a very long form which fetches data from multiple sources for each section which is inside accordions. We fetch and auto-populate the data only when an accordion is expanded, else we don't need to send it back for modification. The requirement is to support this kind of form edits, where we can set initialValues for different fields independently even after the initial form load while also preserving the correctness of isDirty, isTouched properties. Be aware that the form data on submit might be partial as we want to load partial and send back only what was was modified.
Current Behavior
I experimented with enableReinitialize prop on Formik. Indeed, we can set initial Values at a later point of time after an async load. But it overrides all the edits as well.
Desired Behavior
To set initialValues of only a desired field such that the form edits are not lost for other fields.
Suggested Solution
If it can be possible to set it at the filed level additionally. isDirty can also be provided at field level in addition to form. e.g. -
field.setInitialFieldValue(newValue )Who does this impact? Who is this for?
It can be useful for long and async loaded forms to be able to use out of the box solution from Formik in case of 'modify' forms.
Describe alternatives you've considered
I did it by using state management and creating my own copy of initialValues which is modified each time we async load a field. It works but does look verbose and doing a lot things what could be possibly provided natively by Formik. At, submit we compare formik values and our state. isDirty is of course not useful anymore.
Additional context