I have a form application that consists of multiple modals, and to proceed to each modal, some fields are required to be filled out by the user. The problem is that modal 1 contains a field that has a nested validation from an object that already has it's own validation. As a result I cannot proceed to modal 2 because it requires the nested field in that modal to be filled out.
To be more clear:
Modal 1: Units need to be validated.
Modal 2: Taxes need to be validated.
Error: Button to proceed is disabled in Modal 1, because taxes in Modal 2 has not been filled out.
How do I tell the application to accept the parent validation, but ignore the nested validation until I have proceeded to the next modal?
******* THIS BUTTON IS IN MODAL 1 *******?
<button @click.prevent="Next" :disabled="$v.wizard.units.$invalid">
******* THIS FIELD IS IN MODAL 2 *********
<b-form-group :label="Taxes" class="col-md-6">
<common-date-picker vuelidate v-model="$v.wizard.units.taxes"/>
</b-form-group>
validations: {
wizard: {
units: {
$each: {
taxes: {
required
},
},
required,
minLength: 1
},