Expose "setErrors" function from useAjvForm

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/use-ajv-form",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Custom React Hook that integrates with Ajv JSON Schema Validator",
   "main": "dist/use-ajv-form.es.js",
   "author": "Aleksandar Grbic",

src/index.ts

@@ -99,7 +99,7 @@ const useAJVForm = <T extends Record<string, any>>(
     });
   };
 
-  const setErrors = (errors: useFormErrors<T>) => {
+  const _setErrors = (errors: useFormErrors<T>) => {
     return Object.keys(errors).reduce(
       (acc, fieldName) => {
         const key = fieldName as keyof typeof state;
@@ -132,7 +132,7 @@ const useAJVForm = <T extends Record<string, any>>(
         );
 
         setState(
-          setErrors(
+          _setErrors(
             Object.keys(errors).reduce((acc, fieldName) => {
               return {
                 ...acc,
@@ -168,6 +168,10 @@ const useAJVForm = <T extends Record<string, any>>(
     [state],
   );
 
+  const setErrors = (errors: ErrorObject[]): void => {
+    setState(_setErrors(getErrors(errors, options?.userDefinedMessages)));
+  };
+
   const isValid = useMemo(() => isFormValid(state), [state]);
 
   useEffect(() => {
@@ -183,12 +187,13 @@ const useAJVForm = <T extends Record<string, any>>(
       return;
     }
 
-    setState(setErrors(getErrors(options?.errors, options?.userDefinedMessages)));
+    setState(_setErrors(getErrors(options?.errors, options?.userDefinedMessages)));
   }, [options?.errors]);
 
   return {
     reset: resetForm,
     set: setFormState,
+    setErrors,
     validate: validateForm,
     onBlur: handleBlur,
     isValid,

src/useAjvForm.test.tsx

@@ -437,7 +437,76 @@ describe('useAJVForm with multiple field updates', () => {
 
     expect(result.current.isDirty).toBe(true);
   });
+});
+
+describe('useAJVForm should properly set errors programmatically using setErrors function', () => {
+  it('sets the errors using form.setErrors without having any userDefinedMessages', () => {
+    const initialData = { title: '', description: '' };
+    const schema: JSONSchemaType<{ title: string; description: string }> = {
+      type: 'object',
+      required: ['title', 'description'],
+      properties: {
+        title: { type: 'string' },
+        description: { type: 'string' },
+      },
+    };
+
+    const { result } = renderHook(() => useAJVForm(initialData, schema));
+
+    result.current.setErrors([
+      {
+        instancePath: '/title',
+        keyword: 'required',
+        params: { missingProperty: 'title' },
+        schemaPath: '#/required',
+      },
+      {
+        instancePath: '/description',
+        keyword: 'required',
+        params: { missingProperty: 'description' },
+        schemaPath: '#/required',
+      },
+    ]);
+
+    expect(result.current.state.title.error).toBe('title is required.');
+    expect(result.current.state.description.error).toBe('description is required.');
+  });
+
+  it('sets the errors using form.setErrors with userDefinedMessages', () => {
+    const initialData = { title: '', description: '' };
+    const schema: JSONSchemaType<{ title: string; description: string }> = {
+      type: 'object',
+      required: ['title', 'description'],
+      properties: {
+        title: { type: 'string' },
+        description: { type: 'string' },
+      },
+    };
+
+    const { result } = renderHook(() =>
+      useAJVForm(initialData, schema, {
+        userDefinedMessages: {
+          required: () => 'Monkey message',
+        },
+      }),
+    );
 
-  // Additional tests can be written to cover other scenarios such as validation,
-  // resetting the form, handling errors, etc., when multiple fields are involved.
+    result.current.setErrors([
+      {
+        instancePath: '/title',
+        keyword: 'required',
+        params: { missingProperty: 'title' },
+        schemaPath: '#/required',
+      },
+      {
+        instancePath: '/description',
+        keyword: 'required',
+        params: { missingProperty: 'description' },
+        schemaPath: '#/required',
+      },
+    ]);
+
+    expect(result.current.state.title.error).toBe('Monkey message');
+    expect(result.current.state.description.error).toBe('Monkey message');
+  });
 });

src/utils/index.ts

@@ -2,11 +2,15 @@ import Ajv, { ErrorObject, KeywordDefinition } from 'ajv';
 
 import { AJVMessageFunction, InitialState, useFormErrors } from './types';
 
-import { DefaultAJVMessages } from './types';
+// import { DefaultAJVMessages } from './types';
 import { defaultAJVMessages } from './constants';
 
-const getFieldName = (field: ErrorObject): string | null => {
-  return field.instancePath.slice(1);
+const getFieldName = (instancePath: string): string | null => {
+  if (!instancePath) {
+    return null;
+  }
+
+  return instancePath.slice(1);
 };
 
 const getErrorMessage = (
@@ -16,13 +20,14 @@ const getErrorMessage = (
   const UNKNOWN_VALIDATION_ERROR = 'Unknown validation error';
 
   try {
-    const keyword = error.keyword as keyof DefaultAJVMessages;
+    const errorObject = error as ErrorObject;
+    const keyword = errorObject.keyword;
     const errorMessageFunction = { ...defaultAJVMessages, ...userDefinedMessages }[
       keyword
     ];
 
     if (typeof errorMessageFunction === 'function') {
-      return errorMessageFunction(error.params);
+      return errorMessageFunction(errorObject.params);
     }
 
     return error.message || UNKNOWN_VALIDATION_ERROR;
@@ -36,7 +41,7 @@ export const getErrors = <T extends Record<string, any>>(
   userDefinedMessages?: Record<string, AJVMessageFunction>,
 ): useFormErrors<T> => {
   return ajvErrors.reduce((acc, current) => {
-    const fieldName: string | null = getFieldName(current);
+    const fieldName: string | null = getFieldName(current?.instancePath);
     if (!fieldName) {
       return acc;
     }

src/utils/types.ts

@@ -1,3 +1,5 @@
+import { ErrorObject } from 'ajv';
+
 export type AJVErrorParams = {
   limit?: number;
   missingProperty?: string;
@@ -20,12 +22,6 @@ export type DefaultAJVMessages = {
   format: AJVMessageFunction;
 };
 
-export type ErrorObject = {
-  keyword: keyof DefaultAJVMessages;
-  params: AJVErrorParams;
-  message?: string;
-};
-
 export type FormField<T> = {
   [K in keyof T]: T[K];
 };
@@ -62,4 +58,5 @@ export interface UseFormReturn<T> {
   isDirty: boolean;
   isValid: boolean;
   onBlur: (fieldName: string) => void;
+  setErrors: (errors: ErrorObject[]) => void;
 }