fix: normalize error paths to use brackets for indices closes #4211

Author: logaretm

.changeset/seven-news-begin.md

@@ -0,0 +1,6 @@
+---
+'vee-validate': patch
+'@vee-validate/zod': patch
+---
+
+fix: Normalize error paths to use brackets for indices closes #4211

packages/shared/utils.ts

@@ -65,3 +65,25 @@ export function merge(target: any, source: any) {
 
   return target;
 }
+
+/**
+ * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax
+ */
+export function normalizeFormPath(path: string): string {
+  const pathArr = path.split('.');
+  if (!pathArr.length) {
+    return '';
+  }
+
+  let fullPath = String(pathArr[0]);
+  for (let i = 1; i < pathArr.length; i++) {
+    if (isIndex(pathArr[i])) {
+      fullPath += `[${pathArr[i]}]`;
+      continue;
+    }
+
+    fullPath += `.${pathArr[i]}`;
+  }
+
+  return fullPath;
+}

packages/vee-validate/src/useForm.ts

@@ -64,11 +64,12 @@ import {
   normalizeErrorItem,
   normalizeEventValue,
   omit,
+  isPathsEqual,
 } from './utils';
 import { FormContextKey } from './symbols';
 import { validateTypedSchema, validateObjectSchema } from './validate';
 import { refreshInspector, registerFormWithDevTools } from './devtools';
-import { isCallable, merge } from '../../shared';
+import { isCallable, merge, normalizeFormPath } from '../../shared';
 import { getConfig } from './config';
 import { PartialDeep } from 'type-fest';
 
@@ -143,7 +144,7 @@ export function useForm<
     const state = findPathState(field);
     if (!state) {
       if (typeof field === 'string') {
-        extraErrorsBag.value[field] = normalizeErrorItem(message);
+        extraErrorsBag.value[normalizeFormPath(field) as Path<TValues>] = normalizeErrorItem(message);
       }
       return;
     }
@@ -242,7 +243,7 @@ export function useForm<
     config?: Partial<PathStateConfig>
   ): PathState<TValue> {
     const initialValue = computed(() => getFromPath(initialValues.value, toValue(path)));
-    const pathStateExists = pathStates.value.find(state => state.path === unref(path));
+    const pathStateExists = pathStates.value.find(s => isPathsEqual(s.path, toValue(path)));
     if (pathStateExists) {
       if (config?.type === 'checkbox' || config?.type === 'radio') {
         pathStateExists.multiple = true;
@@ -383,7 +384,7 @@ export function useForm<
   }
 
   function findPathState<TPath extends Path<TValues>>(path: TPath | PathState) {
-    const pathState = typeof path === 'string' ? pathStates.value.find(state => state.path === path) : path;
+    const pathState = typeof path === 'string' ? pathStates.value.find(s => isPathsEqual(s.path, path)) : path;
 
     return pathState as PathState<PathValue<TValues, TPath>> | undefined;
   }
@@ -493,7 +494,7 @@ export function useForm<
   handleSubmit.withControlled = makeSubmissionFactory(true);
 
   function removePathState<TPath extends Path<TValues>>(path: TPath, id: number) {
-    const idx = pathStates.value.findIndex(s => s.path === path);
+    const idx = pathStates.value.findIndex(s => isPathsEqual(s.path, path));
     const pathState = pathStates.value[idx];
     if (idx === -1 || !pathState) {
       return;

packages/vee-validate/src/utils/assertions.ts

@@ -1,5 +1,5 @@
 import { Locator, TypedSchema, YupSchema } from '../types';
-import { isCallable, isObject } from '../../../shared';
+import { isCallable, isObject, normalizeFormPath } from '../../../shared';
 import { IS_ABSENT } from '../symbols';
 
 export const isClient = typeof window !== 'undefined';
@@ -186,3 +186,7 @@ export function isFile(a: unknown): a is File {
 
   return a instanceof File;
 }
+
+export function isPathsEqual(lhs: string, rhs: string) {
+  return normalizeFormPath(lhs) === normalizeFormPath(rhs);
+}

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

@@ -3,6 +3,7 @@ import { mountWithHoc, setValue, flushPromises, runInSetup, dispatchEvent } from
 import * as yup from 'yup';
 import { onMounted, Ref } from 'vue';
 import { ModelComp, CustomModelComp } from './helpers/ModelComp';
+import { FieldContext } from '../dist/vee-validate';
 
 describe('useForm()', () => {
   const REQUIRED_MESSAGE = 'Field is required';
@@ -1203,4 +1204,48 @@ describe('useForm()', () => {
     await flushPromises();
     expect(form.meta.value.dirty).toBe(false);
   });
+
+  describe('error paths can have dot or square bracket for the same field', () => {
+    test('path is bracket, mutations are dot', async () => {
+      let field!: FieldContext<unknown>;
+      let errorSetter!: FormContext['setFieldError'];
+      mountWithHoc({
+        setup() {
+          const { setFieldError } = useForm();
+          field = useField('users[0].test');
+          errorSetter = setFieldError;
+          return {};
+        },
+        template: `<div></div>`,
+      });
+
+      await flushPromises();
+      expect(field.errorMessage.value).toBe(undefined);
+      await flushPromises();
+      errorSetter('users.0.test', 'error');
+      await flushPromises();
+      expect(field.errorMessage.value).toBe('error');
+    });
+
+    test('path is dot, mutations are bracket', async () => {
+      let field!: FieldContext<unknown>;
+      let errorSetter!: FormContext['setFieldError'];
+      mountWithHoc({
+        setup() {
+          const { setFieldError } = useForm();
+          field = useField('users.0.test');
+          errorSetter = setFieldError;
+          return {};
+        },
+        template: `<div></div>`,
+      });
+
+      await flushPromises();
+      expect(field.errorMessage.value).toBe(undefined);
+      await flushPromises();
+      errorSetter('users[0].test', 'error');
+      await flushPromises();
+      expect(field.errorMessage.value).toBe('error');
+    });
+  });
 });

packages/zod/src/index.ts

@@ -1,7 +1,7 @@
 import { ZodObject, input, output, ZodDefault, ZodSchema, ParseParams, ZodIssue } from 'zod';
 import { PartialDeep } from 'type-fest';
 import type { TypedSchema, TypedSchemaError } from 'vee-validate';
-import { isIndex, isObject, merge } from '../../shared';
+import { isObject, merge, normalizeFormPath } from '../../shared';
 
 /**
  * Transforms a Zod object schema to Yup's schema
@@ -49,7 +49,7 @@ export function toTypedSchema<
 
 function processIssues(issues: ZodIssue[], errors: Record<string, TypedSchemaError>): void {
   issues.forEach(issue => {
-    const path = joinPath(issue.path);
+    const path = normalizeFormPath(issue.path.join('.'));
     if (issue.code === 'invalid_union') {
       processIssues(
         issue.unionErrors.flatMap(ue => ue.issues),
@@ -69,27 +69,6 @@ function processIssues(issues: ZodIssue[], errors: Record<string, TypedSchemaErr
   });
 }
 
-/**
- * Constructs a path with brackets to be compatible with vee-validate path syntax
- */
-function joinPath(path: (string | number)[]): string {
-  if (!path.length) {
-    return '';
-  }
-
-  let fullPath = String(path[0]);
-  for (let i = 1; i < path.length; i++) {
-    if (isIndex(path[i])) {
-      fullPath += `[${path[i]}]`;
-      continue;
-    }
-
-    fullPath += `.${path[i]}`;
-  }
-
-  return fullPath;
-}
-
 // Zod does not support extracting default values so the next best thing is manually extracting them.
 // https://github.com/colinhacks/zod/issues/1944#issuecomment-1406566175
 function getDefaults<Schema extends ZodSchema>(schema: Schema): unknown {