vee-validate

vee-validate copied to clipboard

Is your feature request related to a problem? Please describe.

Reactive object values from useForm is bind directly to corresponding input, so Vue sets field value, and then recalculate all depending variables and execute watch and watchEffect before than meta.valid become false. I don't really think that's a bug, so I open feature request.

That's example of problem https://stackblitz.com/edit/vue-qvd5h5?file=src/App.vue

User in my app doesn't have to submit the form, app use throttled requests for updating data.

Describe the solution you'd like

I suppose it would be awesome to have validValues object that updates only after trusthy field validation.

// Use case:
const { validValues } = useForm();
watch(() => validValues.field, () => {
  // update something
});

Also it would be much more awesome if this object will contain transformed values from yup or zod.

Describe alternatives you've considered

Set field meta.valid = false before setting new field value in handleChange.

Or I could watch when meta.pending changes to false and then check if field value is valid and changed.

const { values, meta, errors } = useForm();
const lastValidValue = ref();
watch(() => meta.value.pending, () => {
  if(meta.value.pending === false || 
     errors.value.field ||
     values.field === lastValidValue.value) 
    return;
  lastValidValue.value = values.field;
})

This could be useful indeed but it would be the door for exposing touchedValues and dirtyValues and by extension dirtyFields or validFields and so on since figuring either requires the other.

I have no immediate solution for this or a workaround at the moment so whatever works for you is fine. I will think about how this should work though and will keep you updated.

Just for elaborating on why this is not straightforward is because not all values are controlled by a useField instance. Some fields are "logical" which are created by either setFieldValue on useForm or by useFieldArray. So those fields don't really exist as fields, they just exist as values and the hard part is figuring out which is which.