fix: respect validate on model update config closes #4451, closes #4467

Author: logaretm

.changeset/spicy-pigs-serve.md

@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+fix: respect validate on model update configuration closes #4451, closes #4467

packages/vee-validate/src/Field.ts

@@ -145,7 +145,7 @@ const FieldImpl = /** #__PURE__ */ defineComponent({
       checkedValue: ctx.attrs.value,
       uncheckedValue,
       label,
-      validateOnValueUpdate: false,
+      validateOnValueUpdate: props.validateOnModelUpdate,
       keepValueOnUnmount: keepValue,
       syncVModel: true,
     });

packages/vee-validate/src/useField.ts

@@ -155,7 +155,7 @@ function _useField<TValue = unknown>(
   const errorMessage = computed(() => errors.value[0]);
 
   if (syncVModel) {
-    useVModel({ value, prop: syncVModel, handleChange });
+    useVModel({ value, prop: syncVModel, handleChange, validateOnModelUpdate: !!opts?.validateOnValueUpdate });
   }
 
   /**
@@ -554,9 +554,10 @@ interface ModelOpts<TValue> {
   prop: string | boolean;
   value: Ref<TValue>;
   handleChange: FieldContext['handleChange'];
+  validateOnModelUpdate: boolean;
 }
 
-function useVModel<TValue = unknown>({ prop, value, handleChange }: ModelOpts<TValue>) {
+function useVModel<TValue = unknown>({ prop, value, handleChange, validateOnModelUpdate }: ModelOpts<TValue>) {
   const vm = getCurrentInstance();
   /* istanbul ignore next */
   if (!vm || !prop) {
@@ -594,7 +595,7 @@ function useVModel<TValue = unknown>({ prop, value, handleChange }: ModelOpts<TV
         return;
       }
 
-      handleChange(newValue);
+      handleChange(newValue, validateOnModelUpdate);
     },
   );
 }

packages/vee-validate/tests/Form.spec.ts

@@ -1274,9 +1274,9 @@ describe('<Form />', () => {
       },
       template: `
       <VForm :validation-schema="schema" v-slot="{ errors, values }">
-        <Field v-model="drinks" name="drink" type="checkbox" value="" /> Coffee
-        <Field v-model="drinks" name="drink" type="checkbox" value="Tea" /> Tea
-        <Field v-model="drinks" name="drink" type="checkbox" value="Coke" /> Coke
+        <Field v-model="drinks" name="drink" type="checkbox" value="" validateOnModelUpdate /> Coffee
+        <Field v-model="drinks" name="drink" type="checkbox" value="Tea" validateOnModelUpdate /> Tea
+        <Field v-model="drinks" name="drink" type="checkbox" value="Coke" validateOnModelUpdate /> Coke
 
         <span id="err">{{ errors.drink }}</span>
         <span id="values">{{ values.drink && values.drink.toString() }}</span>