fix: send transformed values as submitted values with useField

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

@@ -4,9 +4,10 @@ import { FieldValidationMetaInfo } from '../../../shared';
 import { Path, PathValue } from './paths';
 import { PartialDeep } from 'type-fest';
 
-export interface ValidationResult {
+export interface ValidationResult<TValue = unknown> {
   errors: string[];
   valid: boolean;
+  value?: TValue;
 }
 
 export interface TypedSchemaError {

packages/vee-validate/src/useForm.ts

@@ -839,6 +839,7 @@ export function useForm<
             key: state.path,
             valid: true,
             errors: [],
+            value: state.value,
           });
         }
 
@@ -847,6 +848,7 @@ export function useForm<
             key: state.path,
             valid: result.valid,
             errors: result.errors,
+            value: result.value ?? state.value,
           };
         });
       }),
@@ -856,19 +858,24 @@ export function useForm<
 
     const results: Partial<FlattenAndSetPathsType<TValues, ValidationResult>> = {};
     const errors: Partial<FlattenAndSetPathsType<TValues, string>> = {};
+    const values: Partial<FlattenAndSetPathsType<TValues, TOutput>> = {};
+
     for (const validation of validations) {
       results[validation.key as Path<TValues>] = {
         valid: validation.valid,
         errors: validation.errors,
       };
 
+      values[validation.key as Path<TValues>] = validation.value as any;
+
       if (validation.errors.length) {
         errors[validation.key as Path<TValues>] = validation.errors[0];
       }
     }
 
     return {
       valid: validations.every(r => r.valid),
+      values: values as any,
       results,
       errors,
     };

packages/vee-validate/src/validate.ts

@@ -49,7 +49,7 @@ export async function validate<TValue = unknown>(
     | GenericValidateFunction<TValue>[]
     | TypedSchema<TValue>,
   options: ValidationOptions = {},
-): Promise<ValidationResult> {
+): Promise<ValidationResult<TValue>> {
   const shouldBail = options?.bails;
   const field: FieldValidationContext<TValue> = {
     name: options?.name || '{field}',
@@ -65,6 +65,7 @@ export async function validate<TValue = unknown>(
   return {
     errors,
     valid: !errors.length,
+    value: result.value,
   };
 }
 
@@ -108,12 +109,14 @@ async function _validate<TValue = unknown>(field: FieldValidationContext<TValue>
 
       if (field.bails) {
         return {
+          value: undefined,
           errors,
         };
       }
     }
 
     return {
+      value: undefined,
       errors,
     };
   }
@@ -136,13 +139,15 @@ async function _validate<TValue = unknown>(field: FieldValidationContext<TValue>
       errors.push(result.error);
       if (field.bails) {
         return {
+          value: undefined,
           errors,
         };
       }
     }
   }
 
   return {
+    value: undefined,
     errors,
   };
 }
@@ -217,6 +222,7 @@ async function validateFieldWithTypedSchema(value: unknown, schema: TypedSchema
   }
 
   return {
+    value: result.value,
     errors: messages,
   };
 }

packages/zod/tests/zod.spec.ts

@@ -356,7 +356,49 @@ test('uses zod default values for initial values', async () => {
   );
 });
 
-test('uses zod transforms values for submitted values', async () => {
+test('uses zod field transforms for submitted values', async () => {
+  const onSubmitSpy = vi.fn();
+  let onSubmit!: () => void;
+
+  const wrapper = mountWithHoc({
+    setup() {
+      const { handleSubmit } = useForm<{
+        test: string;
+      }>();
+
+      const testRules = toTypedSchema(z.string().transform(value => `modified: ${value}`));
+      const { value } = useField('test', testRules);
+
+      // submit now
+      onSubmit = handleSubmit(onSubmitSpy);
+
+      return {
+        value,
+      };
+    },
+    template: `
+      <div>
+          <input v-model="value" type="text">
+      </div>
+    `,
+  });
+
+  const input = wrapper.$el.querySelector('input');
+
+  setValue(input, '12345678');
+  await flushPromises();
+  onSubmit();
+  await flushPromises();
+  await expect(onSubmitSpy).toHaveBeenCalledTimes(1);
+  await expect(onSubmitSpy).toHaveBeenLastCalledWith(
+    expect.objectContaining({
+      test: 'modified: 12345678',
+    }),
+    expect.anything(),
+  );
+});
+
+test('uses zod form transforms for submitted values', async () => {
   const onSubmitSpy = vi.fn();
   let onSubmit!: () => void;
   let model!: Ref<string | undefined>;