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

logaretm · Sep 9, 2023 · 5231f43 · 5231f43
1 parent 2845e95
commit 5231f43
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/.changeset/spicy-pigs-serve.md b/.changeset/spicy-pigs-serve.md
@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+fix: respect validate on model update configuration closes #4451, closes #4467
diff --git a/packages/vee-validate/src/Field.ts b/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,
     });

diff --git a/packages/vee-validate/src/useField.ts b/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);
     },
   );
 }

diff --git a/packages/vee-validate/tests/Form.spec.ts b/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>