Reset Form v4.x with ionic inputs

[amiraiouaz]

Hello,

First of all, I would like to say thank you, great library!

I am using the v4.x (with Vue 3 and Ionic) and I am trying to reset the form using FormActions.resetForm() after submit.

The values reset but the errors trigger as well. I do not want the errors to trigger. I tried all the following methods from FormActions:

export interface FormActions {
setFieldValue: (field: T, value: any) => void;
setFieldError: (field: string, message: string | undefined) => void;
setErrors: (fields: Partial<Record<string, string | undefined>>) => void;
setValues: (fields: Partial<Record<T, any>>) => void;
setFieldTouched: (field: string, isTouched: boolean) => void;
setTouched: (fields: Partial<Record<string, boolean>>) => void;
setFieldDirty: (field: string, isDirty: boolean) => void;
setDirty: (fields: Partial<Record<string, boolean>>) => void;
resetForm: (state?: Partial) => void;
}

and the form state:

interface FormState {
// any error messages
errors: Record<string, string>;
// dirty meta flags
dirty: Record<string, boolean>;
// touched meta flags
touched: Record<string, boolean>;
// Form Values
values: Record<string, any>;
}

But not luck.

How can I achieve this?

Thank you in advance!

[logaretm]

Create a minimal example on codesandbox and I will happily take a look.

[amiraiouaz]

Hello!

Thanks for your quick reply.

I just created a quick codesandbox: https://codesandbox.io/s/infallible-lovelace-5mf4n?file=/src/main.js

But the issue seems to come from the Ionic components. When I use regular HTML I have no issues, but when I use the Ionic component, it ignores, for example, the validateOnInput: false and trigger the errors after a reset.

I'll have a closer look at the Ionic input component.

Thanks!

[logaretm]

I'm not familiar with ionic, but feel free to create a repo with ionic, and I will take a look.

[amiraiouaz]

Hi again,

Sorry I just had the time to do it: https://codesandbox.io/s/hopeful-galois-bj88m

After the resetForm() it triggers the errors.

I am using global rules.

Home.vue
main.ts

Thanks for your help!

[logaretm]

Thank you, this will take some time to investigate as I am not familiar with how ionic behaves in relation to Vue. for the meantime I have created an issue referencing this discussion here, feel free to provide any attempts or fixes you tried there

#3100

[logaretm]

@amiraiouaz After investigation, it looks like Ionic input components emit an update:modelValue event when the value is changed via props which doesn't make sense.

it might be worth it for you to report this behavior to the ionic team, specifically emitting an update:modelValue when the modelValue prop is changed externally because there is nothing to sync.

This is not a vee-validate issue and no reliable changes can be introduced to fix it. As a workaround disabling the validateOnModelUpdate should do the trick.

Workaround demo: https://codesandbox.io/s/purple-rgb-gvnc8?file=/src/views/Home.vue

[amiraiouaz]

Hello @logaretm,

Sorry for the late reply, I was off for Christmas.

Thanks a lot of your investigation and for your workaround. It did the trick.

Yes probably, I am pretty new to Ionic so I'll try to understand why they have this behavior.

Cheers!