FormKit Multi-Step referencing values from another step?

[dbethel-nib]

I have a multi-step form, there is a step where I am taking in documents, however the documents that I require are dependent on the response from a previous step. How can I require a field in one step based on the value of a field from another step?

[fenilli]

One way is to make it the same name, so the value will also be passed to it.

[matsn0w]

@fenilli can you please explain how this should work? Maybe provide a working example? I briefly tried this but couldn't get it to work.

I don't see how using the same name would give the same value, as the input is living under a different parent (with it's own name)

[fenilli]

@matsn0w You are indeed correct, not sure what I was on when I wrote that.

I was probably on my mind about a plugin that was written for it in another question that shared state between groups for multi-step, don't even remember.

[matsn0w]

Ah, nice XD

So, what would be a good approach to do this?

[fenilli]

I guess it would be to clone values to another step when calling onStepChange, so when a step is about to change, save the step.value, after the step change you have the new step, set that newStep.input(oldStep.value), now if they have the same name it will work.

[matsn0w]

I've come up with a different approach. Not sure if this is a best practice, but at least it seems to be working!

I'm saving the entire form in a state (living in a composable, so it's easy to use in all components). I can reference this state in all components. I'm updating it using v-model on all form fields.

At the end, I simply submit the value of the state.

Simplified example:

// multiStepForm.ts
export const useMultiStepForm = () => useState<FormData>('mutliStepForm', () => {...defaultFormValue});

// component.vue
const formData = useMultiStepForm();
console.log(formData.value);

[dbethel-nib]

So currently I have my steps in separate components like below

<FormKit name="steps" type="multi-step">

          <FormKit name="demographics" type="step">
            <CardsDemographics/>
          </FormKit>

          <FormKit label="Spousal details" name="spousalDetails" type="step">
            <SharedMaritalStatus/>
          </FormKit>
</Foirmkit>

I want to get the reactive data from the first step component, inside of the second one. I need to use values from previous steps to determine what to show in a current step. How would I do this? @fenilli

[fenilli]

Inside CardDemographics where your input resides it has a name property, and inside SharedMartialStatus where you want to have the value, it also should have an input with that same name.

[dbethel-nib]

Thanks for the idea @fenilli , for anyone else wondering how I managed to fix this. I used vue's "defineModel" function to data bind an object from the parent too all the steps. Then in any of the steps I'm able to access the same data. Worked like a charm.