fix: validate form values on setValues by default closes #4359

Author: logaretm

.changeset/rotten-buttons-kiss.md

@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+fix: validate form values on setValues by default closes #4359

packages/vee-validate/src/types/forms.ts

@@ -165,7 +165,7 @@ export interface FormActions<TValues extends GenericObject, TOutput = TValues> {
   setFieldValue<T extends Path<TValues>>(field: T, value: PathValue<TValues, T>, shouldValidate?: boolean): void;
   setFieldError(field: Path<TValues>, message: string | string[] | undefined): void;
   setErrors(fields: FormErrors<TValues>): void;
-  setValues(fields: PartialDeep<TValues>): void;
+  setValues(fields: PartialDeep<TValues>, shouldValidate?: boolean): void;
   setFieldTouched(field: Path<TValues>, isTouched: boolean): void;
   setTouched(fields: Partial<Record<Path<TValues>, boolean>>): void;
   resetForm(state?: Partial<FormState<TValues>>): void;

packages/vee-validate/src/useForm.ts

@@ -590,11 +590,14 @@ export function useForm<
   /**
    * Sets multiple fields values
    */
-  function setValues(fields: PartialDeep<TValues>) {
+  function setValues(fields: PartialDeep<TValues>, shouldValidate = true) {
     merge(formValues, fields);
-
     // regenerate the arrays when the form values change
     fieldArrays.forEach(f => f && f.reset());
+
+    if (shouldValidate) {
+      validate();
+    }
   }
 
   function createModel<TPath extends Path<TValues>>(path: MaybeRef<TPath>) {
@@ -670,7 +673,7 @@ export function useForm<
       setFieldValue(state.path as Path<TValues>, getFromPath(newValues, state.path), false);
       setFieldError(state.path as Path<TValues>, undefined);
     });
-    setValues(newValues);
+    setValues(newValues, false);
 
     setErrors(resetState?.errors || {});
     submitCount.value = resetState?.submitCount || 0;

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

@@ -158,6 +158,47 @@ describe('useForm()', () => {
     expect(meta[2]?.textContent).toBe('true');
   });
 
+  // #4359
+  test('setValues should validate by default', async () => {
+    let form!: FormContext<any>;
+    mountWithHoc({
+      setup() {
+        form = useForm({ validationSchema: yup.object().shape({ field: yup.string().required(REQUIRED_MESSAGE) }) });
+        form.defineInputBinds('field');
+
+        return {};
+      },
+      template: `<div></div>`,
+    });
+
+    await flushPromises();
+    expect(form.errors.value.field).toBe(undefined);
+
+    form.setValues({ field: '' });
+    await flushPromises();
+    expect(form.errors.value.field).toBe(REQUIRED_MESSAGE);
+  });
+
+  test('setValues should not validate if passed false as second arg', async () => {
+    let form!: FormContext<any>;
+    mountWithHoc({
+      setup() {
+        form = useForm({ validationSchema: yup.object().shape({ field: yup.string().required(REQUIRED_MESSAGE) }) });
+        form.defineInputBinds('field');
+
+        return {};
+      },
+      template: `<div></div>`,
+    });
+
+    await flushPromises();
+    expect(form.errors.value.field).toBe(undefined);
+
+    form.setValues({ field: '' }, false);
+    await flushPromises();
+    expect(form.errors.value.field).toBe(undefined);
+  });
+
   test('has a validate() method that returns an aggregate of validation results using field rules', async () => {
     let validate: any;
     mountWithHoc({