feat: expose all field errors as an array

Author: lars-berger

README.md

@@ -17,6 +17,7 @@ Field-level properties & methods
 
 ```ts
 getFieldError<P extends FieldPath<V>>(fieldPath: P): string | null;
+getFieldErrors<P extends FieldPath<V>>(fieldPath: P): string[];
 getFieldValue<P extends FieldPath<V>>(fieldPath: P): FieldValue<V, P>;
 isFieldDirty<P extends FieldPath<V>>(fieldPath: P): boolean;
 hasFieldError<P extends FieldPath<V>>(fieldPath: P): boolean;

src/components/field.component.tsx

@@ -12,6 +12,7 @@ import type {
 } from '../types';
 import {
   getFieldError,
+  getFieldErrors,
   getFieldValue,
   isFieldDirty,
   hasFieldError,
@@ -81,6 +82,7 @@ export function Field<
 
   const fieldState = {
     error: createMemo(() => getFieldError(formState, fieldPath)),
+    errors: createMemo(() => getFieldErrors(formState, fieldPath)),
     isDirty: createMemo(() => isFieldDirty(formState, fieldPath)),
     hasError: createMemo(() => hasFieldError(formState, fieldPath)),
     isTouched: createMemo(() => isFieldTouched(formState, fieldPath)),

src/methods/get-field-error.ts

@@ -2,7 +2,7 @@ import type { FormValue, FormState, FieldPath } from '../types';
 import { isTraversable } from '../utils';
 
 /**
- * Get error for a field (if there is one).
+ * Get the first error for a field (if there is one).
  */
 export function getFieldError<V extends FormValue, P extends FieldPath<V>>(
   formState: FormState<V>,
@@ -12,14 +12,14 @@ export function getFieldError<V extends FormValue, P extends FieldPath<V>>(
   const { errorFieldPaths } = formState.__internal.fieldStates;
 
   if (errorFieldPaths.has(fieldPath)) {
-    return errorFieldPaths.get(fieldPath) ?? null;
+    return errorFieldPaths.get(fieldPath)?.[0] ?? null;
   }
 
   // No need to check descendants if the value is not an object or array.
   if (isTraversable(formValue)) {
-    for (const [errorFieldPath, error] of errorFieldPaths) {
+    for (const [errorFieldPath, errors] of errorFieldPaths) {
       if (errorFieldPath.startsWith(fieldPath)) {
-        return error;
+        return errors[0] ?? null;
       }
     }
   }

src/methods/get-field-errors.ts

@@ -0,0 +1,28 @@
+import type { FormValue, FormState, FieldPath } from '../types';
+import { isTraversable } from '../utils';
+
+/**
+ * Get all errors for a field.
+ */
+export function getFieldErrors<
+  V extends FormValue,
+  P extends FieldPath<V>,
+>(formState: FormState<V>, fieldPath: P): string[] {
+  const { value: formValue } = formState;
+  const { errorFieldPaths } = formState.__internal.fieldStates;
+
+  if (errorFieldPaths.has(fieldPath)) {
+    return errorFieldPaths.get(fieldPath) ?? [];
+  }
+
+  // No need to check descendants if the value is not an object or array.
+  if (isTraversable(formValue)) {
+    for (const [errorFieldPath, errors] of errorFieldPaths) {
+      if (errorFieldPath.startsWith(fieldPath)) {
+        return errors;
+      }
+    }
+  }
+
+  return [];
+}

src/methods/index.ts

@@ -1,4 +1,5 @@
 export * from './get-field-error';
+export * from './get-field-errors';
 export * from './get-field-value';
 export * from './has-error';
 export * from './has-field-error';

src/methods/validate.ts

@@ -18,8 +18,21 @@ export function validate<V extends FormValue>(
 
   const result = options.schema.safeParse(formValue);
 
+  // Clear existing errors.
+  fieldStates.errorFieldPaths.clear();
+
+  // Aggregate errors by field path. A single field can have multiple
+  // errors.
   for (const error of result.error?.errors ?? []) {
-    fieldStates.errorFieldPaths.set(error.path.join('.'), error.message);
+    const fieldPath = error.path.join('.');
+
+    const existingErrors =
+      fieldStates.errorFieldPaths.get(fieldPath) ?? [];
+
+    fieldStates.errorFieldPaths.set(fieldPath, [
+      ...existingErrors,
+      error.message,
+    ]);
   }
 
   return result.success;

src/types/field-state.model.ts

@@ -6,6 +6,7 @@ import type { FormValue } from './form-value.model';
 
 export type FieldState<V extends FormValue, P extends FieldPath<V>> = {
   error: Accessor<string | null>;
+  errors: Accessor<string[]>;
   isDirty: Accessor<boolean>;
   hasError: Accessor<boolean>;
   isTouched: Accessor<boolean>;

src/types/field-states.model.ts

@@ -1,5 +1,5 @@
 export interface FieldStates {
   dirtyFieldPaths: Set<string>;
   touchedFieldPaths: Set<string>;
-  errorFieldPaths: Map<string, string>;
+  errorFieldPaths: Map<string, string[]>;
 }