watch form values, sync problem

[jankrnavek]

Sync problem between form error and form state valid when using watch on form values

There is a form with a lot of inputs (<input type='number'>).
I don't want to use handleSubmit function, but instead I want watch form values (myFormValues) to trigger uploadData()
Everything works fine until the first field error because myFormMeta.value.valid reacts late. -> if the form has an new error on field, myFormMeta.value.valid still shows true but const {meta} = useField(()=>props.fieldName) ; meta.value.valid; shows correct value false

I am doing something wrong?
It's ok to use watch on myFormValues?

Vue 3.3.4
Vuetify 3.3.7
Vee-validate 4.10.5

const {
	meta: myFormMeta,
	values: myFormValues,
} = useForm({
	validationSchema: YUP_SCHEMA,
	initialValues: FORM_DEFAULT,
	validateOnMount: false,
	keepValuesOnUnmount: false,
})


watch(
	() => myFormValues,
	async () => {
		if (myFormMeta.value.valid) {
			await uploadData()
		}
	},
	{
		deep: true,
		immediate: false,
	}
)

Reproduction steps

bug

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

log

Demo link

www

Code of Conduct

• I agree to follow this project's Code of Conduct

[logaretm]

Moved this to a discussion since it is not an issue.

You could watch the values for sure but you could also make use of the handleSubmit to wait for the validation to be over before you submit to the server since this is what you effectively want to do that.

const {
	meta: myFormMeta,
	values: myFormValues,
    handleSubmit
} = useForm({
	validationSchema: YUP_SCHEMA,
	initialValues: FORM_DEFAULT,
	validateOnMount: false,
	keepValuesOnUnmount: false,
})

const submit = handleSubmit(async (values) => {
  await uploadData()
}})

watch(
	myFormValues,
	async () => {
       await submit();
	},
	{
		deep: true,
		immediate: false,
	}
)

The handleSubmit isn't just about form submission, you can use it anywhere however you want.

[jankrnavek]

Thank you for your quick reply.
Your solution with handleSubmit works perfectly.

I will ask anyway.
How can I wait for form validation in my original code?
(without handleSubmit)

[logaretm]

Could be tricky to do that since you will rely on async code executing in order (vee-validate watcher, then yours).

But you can do it with @vueuse/core package with until().

This is not guaranteed, but something like this code work.

await nextTick();
await until(() => meta.value.pending).toBe(false);

[jankrnavek]

That's what I was looking for, until works perfectly...
Btw. some idea for improvement, support for https://github.com/webfansplz/vite-plugin-vue-devtools

[logaretm]

Oh, yea I'm considering doing it first for nuxt then maybe check this one out. Thanks for the suggestion.