Provide option to call change from outside/initialChange

[rvsia]

Scope: FormRenderer

Description

In Sources UI I have this following flow:

[ FORM ] > submit 📨 > 💥 ☠️ > [ ERROR_PAGE ] > retry button ♻️ > [ FORM ]

The form has set initialValues. In the submit action, form values and initial values are compared and only modified values are sent to an API.

I need to re-set the values when restarting the form after an error occurs (formValues from the first attempt set in the second attempt). However, I cannot use the initial values, because I am using them to compare new values with initials. (So in the second attempt: formValues = initialValues = no values 😭 )

I propose two ways how to solve this riddle:

1st ) Provide a way how to call onChange outside the form

2nd and maybe preferred ) Provide something like initialChange, which will be called only once and will call change event with provided values after the form renderer is mount

Schema

  <FormRenderer
    schema={schema}
    formFieldsMapper={formFieldsMapper}
    layoutMapper={layoutMapper}
    onSubmit={console.log}
    initialValues={{
       name: 'Mike Johnson'
   }}
    initialChange={{
        name: 'John Smith'
    }}
  />

=> modified fields: name

What do you think, @Hyperkid123 👾 1️⃣ 2️⃣ 3️⃣ ?

[Hyperkid123]

You can use initialize from the second submit argument. I don't think there is any need for exposing the onChange. And the initialChange seems to me like some custom behavior. If we implement that, what is stopping someone from requesting something like secondInitialChange.

[rvsia]

The initialize from submit won't work as the second form is different 'instance'.

[Hyperkid123]

I see. Store the submit value then and use them as initial values for the next instance? I really don't like any of the stuff you proposed.

[rvsia]

As I said, the problem is that I need to get dirty fields to know which values have been modified by user.

[Hyperkid123]

would https://final-form.org/docs/react-final-form/types/FormProps#keepdirtyonreinitialize help? Is it possible to use initialize at all?

[rvsia]

What about to do something like

  <FormRenderer
    schema={schema}
    formFieldsMapper={formFieldsMapper}
    layoutMapper={layoutMapper}
    onSubmit={console.log}
    initialValues={{
       name: 'Mike Johnson'
   }}
    onMount={
    (formOptions, ...otherthings) => formOptions.onChange(blablabla)
    }
  />

?

Edit: After submitting, the form is gone, the second attempt is totally new instance with no knowing about the first (renderer > error step > renderer)

[Hyperkid123]

That is a bit better but I would still like to avoid it if possible.

Why is it a problem comparing the first initial values with the second instance of the form? You must have them somewhere. You don't need "dirty" metadata for that I think.

[rvsia]

It is possible to compare the first initialValues, and second ones in the submit action but I am just trying to find some clean and simple solution. Alright, I will do it other way, thanks for discussing this! This can be closed now.

[Hyperkid123]

The thing is this behavior is very specific. I did play with the idea of exposing the formApi from the get-go but ultimately decided against it and I will be until someone finds some use-case where there is no other way :D. To be clear the above-proposed solutions are not that simple and clean to implement inside the renderer. I tried.