Modal wizard or wizard reset steps and data

Hi, can please help me. I need reset data and back to step 1 when i press submit button. in modal wizard.

i see in your code "reset form¨ funtion but not work.

can please give me a simple sample to clean formData.value and reset to step 1

Thanks you
have a nice day!

I have metrotic 8 vue

Text formatting options
Submit

Replies (12)

Hi,

To reset data you can create an object with initial values in your component and after you submit the form you can just set initialize values to actual values object and then set stepper to the first step.

You can use goFirst function:

stepperObj.goFirst();

Hi, i add stepperObj.goFirst(); to then in my funtion but not work!
system say .goFirst() not exist.

const formSubmit = async () => {
try {
await firebase
.firestore()
.collection("Spark")
.doc("Datos")
.collection("Usuarios")
.add(formData.value);
Swal.fire({
text: "Su consulta fue enviada con exito",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Cerrar",
customClass: {
confirmButton: "btn fw-bold btn-light-primary",
},
}).then(() => {
addCustomerModalRef.value as HTMLElement;
hideModal(addCustomerModalRef.value);
_stepperObj.goFirst();
});
} catch (error) {
// eslint-disable-next-line
Swal.fire({
text: "Upps, ha ocurrido un error al intentar guardar los datos, porfavor revisa tu conexion a internet he intenta de nuevo.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Cerrar",
customClass: {
confirmButton: "btn fw-bold btn-light-danger",
},
});
// console.error(error);
}
};

Did you define a _stepperObj as a ref?

In this case you have to use:

_stepperObj.value.goFirst();

Hi, this is all my code
Im using all your demo wizard code.

Sorry im dev studdent!!

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from "vue";
import { hideModal } from "@/core/helpers/dom";
import { StepperComponent } from "@/assets/ts/components/_StepperComponent";
import Swal from "sweetalert2/dist/sweetalert2.min.js";
import { useForm } from "vee-validate";
import { Field, ErrorMessage } from "vee-validate";
import * as Yup from "yup";
import firebase from "firebase/app";

interface Step1 {
horario: string;
}

interface Step2 {
tratamiento: any;
numeroCaso: string;
leadtime: string;
prioridad: any;
}

interface Step3 {
doctorName: string;
region: string;
}

interface OtrosDatos {
created_at: any;
finalizado: boolean;
end_at: any;
lead: string;
status: {
label: string;
state: string;
};
}

interface KTCreateApp extends Step1, Step2, Step3, OtrosDatos {}

export default defineComponent({
name: "create-account-modal",
components: {
Field,
ErrorMessage,
},
setup() {
const addCustomerModalRef = ref<null | HTMLElement>(null);
const _stepperObj = ref<StepperComponent | null>(null);
const createAccountRef = ref<HTMLElement | null>(null);
const currentStepIndex = ref(0);
const formData = ref<KTCreateApp>({
horario: "regular",
tratamiento: {
label: "CR",
state: "primary",
CR: true,
SPARK10: false,
SPARK20: false,
ADVANCE: false,
REF: false,
KIDS: false,
},
numeroCaso: "",
leadtime: "",
prioridad: {
label: "NORMAL",
state: "success",
},
doctorName: "",
region: "",
created_at: Date.now(),
finalizado: false,
end_at: null,
lead: "",
status: {
label: "Proceso",
state: "success",
},
});
const NORMAL = {
label: "NORMAL",
state: "success",
};
const RISK = {
label: "RISK",
state: "warning",
};
const PASSDUE = {
label: "PASS-DUE",
state: "danger",
};
const CR = {
label: "CR",
state: "primary",
CR: true,
SPARK10: false,
SPARK20: false,
ADVANCE: false,
REF: false,
KIDS: false,
};
const SPARK10 = {
label: "SPARK10",
state: "primary",
CR: false,
SPARK10: true,
SPARK20: false,
ADVANCE: false,
REF: false,
KIDS: false,
};
const SPARK20 = {
label: "SPARK20",
state: "primary",
CR: false,
SPARK10: false,
SPARK20: true,
ADVANCE: false,
REF: false,
KIDS: false,
};
const ADVANCE = {
label: "ADVANCE",
state: "primary",
CR: false,
SPARK10: false,
SPARK20: false,
ADVANCE: true,
REF: false,
KIDS: false,
};
const REF = {
label: "REF",
state: "primary",
CR: false,
SPARK10: false,
SPARK20: false,
ADVANCE: false,
REF: true,
KIDS: false,
};
const KIDS = {
label: "KIDS",
state: "primary",
CR: false,
SPARK10: false,
SPARK20: false,
ADVANCE: false,
REF: false,
KIDS: true,
};

onMounted(() => {
_stepperObj.value = StepperComponent.createInsance(
addCustomerModalRef.value as HTMLElement
);
});

const createAppSchema = [
Yup.object({}),
Yup.object({
numeroCaso: Yup.string().required().label("Numero de Caso"),
leadtime: Yup.string().required().label("Leadtime"),
}),
Yup.object({
doctorName: Yup.string().required().label("El nombre del Doctor"),
region: Yup.string().required().label("La region es requerida"),
}),
Yup.object({}),
];

// extracts the individual step schema
const currentSchema = computed(() => {
return createAppSchema[currentStepIndex.value];
});

const totalSteps = computed(() => {
if (!_stepperObj.value) {
return;
}

return _stepperObj.value.totatStepsNumber;
});

const { resetForm, handleSubmit } = useForm<
Step1 | Step2 | Step3 | OtrosDatos
>({
validationSchema: currentSchema,
});

const previousStep = () => {
if (!_stepperObj.value) {
return;
}

currentStepIndex.value--;

_stepperObj.value.goPrev();
};

const handleStep = handleSubmit((values) => {
for (const item in values) {
// eslint-disable-next-line no-prototype-builtins
if (values.hasOwnProperty(item)) {
if (values[item]) {
formData.value[item] = values[item];
}
}
}

currentStepIndex.value++;

if (!_stepperObj.value) {
return;
}

_stepperObj.value.goNext();
});

const formSubmit = async () => {
try {
await firebase
.firestore()
.collection("Spark")
.doc("Datos")
.collection("Usuarios")
.add(formData.value);
Swal.fire({
text: "Su consulta fue enviada con exito",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Cerrar",
customClass: {
confirmButton: "btn fw-bold btn-light-primary",
},
}).then(() => {
addCustomerModalRef.value as HTMLElement;
hideModal(addCustomerModalRef.value);
_stepperObj.value.goFirst();
});
} catch (error) {
// eslint-disable-next-line
Swal.fire({
text: "Upps, ha ocurrido un error al intentar guardar los datos, porfavor revisa tu conexion a internet he intenta de nuevo.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Cerrar",
customClass: {
confirmButton: "btn fw-bold btn-light-danger",
},
});
// console.error(error);
}
};

resetForm({
values: {
...formData.value,
},
});

return {
createAccountRef,
totalSteps,
previousStep,
handleStep,
formSubmit,
currentStepIndex,
formData,
NORMAL,
RISK,
PASSDUE,
CR,
SPARK10,
SPARK20,
ADVANCE,
REF,
KIDS,
console,
addCustomerModalRef,
};
},
});
</script>

Hi Lauris, I finally can reset steps
but i cant reset my formData.value after submit

Please can you help me, you have all my code.

Thanks a lot Lauris happy

Solution to reset Steps that work to me!

if (!_stepperObj.value) {
return;
}
_stepperObj.value.goFirst(); // pasa el wizard al paso 1

Hi,

You can achieve this as shown below:

const formInitData ref<KTCreateApp>({
//put all default values here
})
const formData = ref<KTCreateApp>({
//put actual values here
});

//on form submit
formData.value = formInitData.value;

Hi, thanks for your prompt response, but it still doesn't work

add my new code

<script lang="ts">
import { computed, defineComponent, onMounted, ref } from "vue";
import { hideModal } from "@/core/helpers/dom";
import { StepperComponent } from "@/assets/ts/components/_StepperComponent";
import Swal from "sweetalert2/dist/sweetalert2.min.js";
import { useForm } from "vee-validate";
import { Field, ErrorMessage } from "vee-validate";
import * as Yup from "yup";
import firebase from "firebase/app";

interface Step1 {
horario: string;
}

interface Step2 {
tratamiento: any;
numeroCaso: string;
leadtime: string;
prioridad: any;
}

interface Step3 {
doctorName: string;
region: string;
}

interface OtrosDatos {
created_at: any;
finalizado: boolean;
end_at: any;
lead: string;
status: {
label: string;
state: string;
};
}

interface KTCreateApp extends Step1, Step2, Step3, OtrosDatos {}

export default defineComponent({
name: "create-account-modal",
components: {
Field,
ErrorMessage,
},
setup() {
const addCustomerModalRef = ref<null | HTMLElement>(null);
const _stepperObj = ref<StepperComponent | null>(null);
const createAccountRef = ref<HTMLElement | null>(null);
const currentStepIndex = ref(0);

const formInitData = ref({
horario: "",
tratamiento: null,
numeroCaso: "",
leadtime: "",
prioridad: "normal",
doctorName: "",
region: "",
created_at: Date.now(),
finalizado: false,
end_at: null,
lead: "",
status: {
label: "Proceso",
state: "success",
},
});

const formData = ref<KTCreateApp>({
horario: "regular",
tratamiento: {
label: "CR",
state: "primary",
CR: true,
SPARK10: false,
SPARK20: false,
ADVANCE: false,
REF: false,
KIDS: false,
},
numeroCaso: "",
leadtime: "",
prioridad: {
label: "NORMAL",
state: "success",
},
doctorName: "",
region: "",
created_at: Date.now(),
finalizado: false,
end_at: null,
lead: "",
status: {
label: "Proceso",
state: "success",
},
});
const NORMAL = {
label: "NORMAL",
state: "success",
};
const RISK = {
label: "RISK",
state: "warning",
};
const PASSDUE = {
label: "PASS-DUE",
state: "danger",
};
const CR = {
label: "CR",
state: "primary",
CR: true,
SPARK10: false,
SPARK20: false,
ADVANCE: false,
REF: false,
KIDS: false,
};
const SPARK10 = {
label: "SPARK10",
state: "primary",
CR: false,
SPARK10: true,
SPARK20: false,
ADVANCE: false,
REF: false,
KIDS: false,
};
const SPARK20 = {
label: "SPARK20",
state: "primary",
CR: false,
SPARK10: false,
SPARK20: true,
ADVANCE: false,
REF: false,
KIDS: false,
};
const ADVANCE = {
label: "ADVANCE",
state: "primary",
CR: false,
SPARK10: false,
SPARK20: false,
ADVANCE: true,
REF: false,
KIDS: false,
};
const REF = {
label: "REF",
state: "primary",
CR: false,
SPARK10: false,
SPARK20: false,
ADVANCE: false,
REF: true,
KIDS: false,
};
const KIDS = {
label: "KIDS",
state: "primary",
CR: false,
SPARK10: false,
SPARK20: false,
ADVANCE: false,
REF: false,
KIDS: true,
};

onMounted(() => {
_stepperObj.value = StepperComponent.createInsance(
addCustomerModalRef.value as HTMLElement
);
});

const createAppSchema = [
Yup.object({}),
Yup.object({
numeroCaso: Yup.string().required().label("Numero de Caso"),
leadtime: Yup.string().required().label("Leadtime"),
}),
Yup.object({
doctorName: Yup.string().required().label("El nombre del Doctor"),
region: Yup.string().required().label("La region es requerida"),
}),
Yup.object({}),
];

// extracts the individual step schema
const currentSchema = computed(() => {
return createAppSchema[currentStepIndex.value];
});

const totalSteps = computed(() => {
if (!_stepperObj.value) {
return;
}

return _stepperObj.value.totatStepsNumber;
});

const { resetForm, handleSubmit } = useForm<
Step1 | Step2 | Step3 | OtrosDatos
>({
validationSchema: currentSchema,
});

const previousStep = () => {
if (!_stepperObj.value) {
return;
}

currentStepIndex.value--;

_stepperObj.value.goPrev();
};

const handleStep = handleSubmit((values) => {
for (const item in values) {
// eslint-disable-next-line no-prototype-builtins
if (values.hasOwnProperty(item)) {
if (values[item]) {
formData.value[item] = values[item];
}
}
}

currentStepIndex.value++;

if (!_stepperObj.value) {
return;
}

_stepperObj.value.goNext();
});

const formSubmit = async () => {
try {
await firebase
.firestore()
.collection("Spark")
.doc("Datos")
.collection("Usuarios")
.add(formData.value);

Swal.fire({
text: "Su consulta fue enviada con exito",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Cerrar",
customClass: {
confirmButton: "btn fw-bold btn-light-primary",
},
}).then(() => {
formData.value = formInitData.value;
addCustomerModalRef.value as HTMLElement;
hideModal(addCustomerModalRef.value);

if (!_stepperObj.value) {
// pasa el wizard al paso 1
return;
}
_stepperObj.value.goFirst(); // pasa el wizard al paso 1
});
} catch (error) {
Swal.fire({
text: "Upps, ha ocurrido un error al intentar guardar los datos, porfavor revisa tu conexion a internet he intenta de nuevo.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Cerrar",
customClass: {
confirmButton: "btn fw-bold btn-light-danger",
},
});
// console.error(error);
}
};

resetForm({
values: {
...formData.value,
},
});

return {
createAccountRef,
totalSteps,
previousStep,
handleStep,
formSubmit,
currentStepIndex,
formData,
NORMAL,
RISK,
PASSDUE,
CR,
SPARK10,
SPARK20,
ADVANCE,
REF,
KIDS,
console,
addCustomerModalRef,
resetForm,
formInitData,
};
},
});
</script>

Could you please retry with the resetForm function?

resetForm({
values: {
...formInitData.value,
},
});

Place code above instead of formData.value = formInitData.value;

Hi, i try but not work!!,

Im looking after modal close, button continue no change to submit if i go to last step. stay permanent.

Hi,

You will need to reset a currentStepIndex as well.

currentStepIndex.value = 0;

Hi Lauris, I have too many days try reset formdata from modal. I cant.
I try your inputs in your demo code wizard and not work.

I think that problem its Field not use v-model to validate.
can please help me how i can reset your wizard form data.

Thanks a lot

Hi,

Have you try to reset data as I mentioned above?

resetForm({
values: {
...formInitData.value,
},
});

Text formatting options
Submit
Text formatting options
Submit