multistep-form-wizard - initialValues avoid schema parsing

[xibman]

Before anything Hi and thanks a lot for your great work.

Is your feature request related to a problem? Please describe.

On a multiple step validation wizard using composition api and validation schema you cannot restore data with initialValues if you are on step 2 for example because the method resolveInitialValues only keep data based on the current schema.

So you loose all data from the step 1 in form values returned by useForm -> values

Next example describe result if direct access on step 2

const initialValues = merge(
    {
      step1: '',
      step2: '',
   },
    savedFormData.value ? savedFormData.value : {}, // data coming from a cookie for example 
  );

const { handleSubmit, values: formData, setValues } = useForm({
  initialValues,
  keepValuesOnUnmount: true,
  validationSchema: currentSchema, // computed that return current step schema
});

console.log(formData); // return { step2: 'any value',} and step 1 value is removed

Describe the solution you'd like

Two solutions possible:

1. Have a way to pass and aggregation of all schema as an option for initial data validation
2. Avoid initial value validation based on schema when keepValuesOnUnmount is true

Describe alternatives you've considered

Possible workaround use setValues(initialValues) after form initialized because does not relies on schema validation

[logaretm]

Hello there, I'm planning on some improvements for multistep forms for 4.9 or 4.10 depending on my release schedule. But it could be simple enough for a quick release but I need to understand a little bit about your use-case.

What do you mean by "restore" here:

you cannot restore data with ...

Do you mean when you go back to step 1 the values aren't restored? There is an official example that got that working.

[xibman]

Thanks for your answer @logaretm

When i mean restore data i was thinking in the event of page reload or future completion by the end user.

In my case i save the form data during user completion in a cookie.

If the user refresh the form on step 2 :

• i get the cookie form data stored as json
• Validate step if step 1 data is correct
• restore all data
• show user step 2

If data from step 1 is invalid user is redirected to step 1

[logaretm]

I see, this could make sense in the improvement that i'm considering for multistep forms like meta for each step and so on. But long way to get there as i have more stuff in the pipeline.

As a workaround, maintain a array of field names for each step then:

• When reload, reset the form with the persisted values then re-validate
• Loop over the errors keys and figure out which step has errors in order
• If a step is found then set the current step to it.

I will mark this as an enhancement to keep it as a use-case for me.

[xibman]

I will try to create an example to be sure we are on the same page and it can be used as a reference point !