Multi Step Form Validation with child components

[sunil-dzango]

I am creating a wizard where where a form is multiple steps. I found this documentation:
Multi-step Form Wizard

The problem is I have a component for each step form like follows:

<template>
  <div>
     <FirstStep v-if="currentStep === 1" />
     <SecondStep v-if="currentStep === 2" />
    <button @click="onNext()">
       Next
   </button>
  </div>
</template>

In previous Vee Validate versions, I was able to provide validator on the parent component as

provide () {
   return  {
    $validator: this.$validator
 }
}

And inject the validator in child components. So, I could use this.$validator.validateAll() in onNext() function. I have not been able to recreate this in the v4.0. Are there additional steps to achieve this?

[logaretm]

I'm assuming each step uses either useForm or <Form /> component. If so then your only option revolves around each step "submitting" its values, this means you would move the "next" button inside each step. Then you can do the rest with emit

<template>
  <div>
     <FirstStep v-if="currentStep === 1" @submit="onStepSubmit" />
     <SecondStep v-if="currentStep === 2"  @submit="onStepSubmit"  />
     <LastStep v-if="currentStep === 3"  @submit="onAllSubmit"  />

  </div>
</template>

<script>
export default {
  data: () => ({
    allData: {},
  }),
  methods: {
    onStepSubmit(data) {
      this.allData = Object.assign({}, this.allData, data);
      this.currentStep++;
  },
  onAllSubmit(data) {
     this.allData = Object.assign({}, this.allData, data);
     // send this.allData to server
   }
}
</script

Alternatively, you could remove the Form usage from all steps and wrap around them in the multiform component, this way you will get the data but you will need to accumulate them like the example shows.