Validation error improvements

Author: Georgi2704

frontend/packages/pydantic-forms/src/core/PydanticFormHandler.tsx

@@ -11,11 +11,11 @@ import { getHashForArray } from '@/utils';
 import { ReactHookForm } from './ReactHookForm';
 
 export const PydanticFormHandler = ({
-                                        formKey,
-                                        onCancel,
-                                        onSuccess,
-                                        title,
-                                    }: PydanticFormHandlerProps) => {
+    formKey,
+    onCancel,
+    onSuccess,
+    title,
+}: PydanticFormHandlerProps) => {
     const config = useGetConfig();
     const [formStep, setStep] = useState<FieldValues>();
     const formStepsRef = useRef<FieldValues[]>([]);
@@ -68,7 +68,7 @@ export const PydanticFormHandler = ({
         isLoading,
         pydanticFormSchema,
         defaultValues,
-        handleRemoveValidationError
+        handleRemoveValidationError,
     } = usePydanticForm(
         formKey,
         config,

frontend/packages/pydantic-forms/src/core/ReactHookForm.tsx

@@ -5,7 +5,7 @@
  *
  * Here we define the outline of the form
  */
-import React, {useEffect} from 'react';
+import React, { useEffect } from 'react';
 import type { FieldValues } from 'react-hook-form';
 import { FormProvider, useForm } from 'react-hook-form';
 
@@ -36,7 +36,7 @@ export interface ReactHookFormProps {
     onPrevious: () => void;
     pydanticFormSchema?: PydanticFormSchema;
     title?: string;
-    handleRemoveValidationError: (location: string[]) => void;
+    handleRemoveValidationError: (location: string) => void;
 }
 
 export const ReactHookForm = ({
@@ -52,7 +52,7 @@ export const ReactHookForm = ({
     onPrevious,
     pydanticFormSchema,
     title,
-    handleRemoveValidationError
+    handleRemoveValidationError,
 }: ReactHookFormProps) => {
     const config = useGetConfig();
     const t = useTranslations('renderForm');
@@ -76,8 +76,8 @@ export const ReactHookForm = ({
     });
 
     useEffect(() => {
-        const reactHookFormWatch = reactHookForm.watch((_, { name }) =>
-            name && handleRemoveValidationError([name])
+        const reactHookFormWatch = reactHookForm.watch(
+            (_, { name }) => name && handleRemoveValidationError(name),
         );
         return reactHookFormWatch.unsubscribe;
     }, [handleRemoveValidationError, reactHookForm]);

frontend/packages/pydantic-forms/src/core/WrapFieldElement.tsx

@@ -2,7 +2,21 @@ import React from 'react';
 import { Controller, useFormContext } from 'react-hook-form';
 
 import { FieldWrap } from '@/components/fields';
-import type { PydanticFormControlledElement, PydanticFormField } from '@/types';
+import { useGetValidationErrors } from '@/core/hooks';
+import {
+    PydanticFormControlledElement,
+    PydanticFormField,
+    PydanticFormValidationErrorDetails,
+} from '@/types';
+
+const getValidationErrorMsg = (
+    errorResponse: PydanticFormValidationErrorDetails | null,
+    path: string,
+): string | undefined => {
+    return errorResponse?.source?.find(
+        (err) => err.loc.map(String).join('.') === path,
+    )?.msg;
+};
 
 export const WrapFieldElement = ({
     PydanticFormControlledElement,
@@ -14,6 +28,8 @@ export const WrapFieldElement = ({
     extraTriggerFields?: string[];
 }) => {
     const { control, trigger } = useFormContext();
+    const validationErrorDetails = useGetValidationErrors();
+
     return (
         <Controller
             name={pydanticFormField.id}
@@ -32,7 +48,12 @@ export const WrapFieldElement = ({
                     <FieldWrap
                         pydanticFormField={pydanticFormField}
                         isInvalid={fieldState.invalid}
-                        frontendValidationMessage={fieldState.error?.message}
+                        frontendValidationMessage={
+                            getValidationErrorMsg(
+                                validationErrorDetails,
+                                pydanticFormField.id,
+                            ) ?? fieldState.error?.message
+                        }
                     >
                         <PydanticFormControlledElement
                             onChange={onChangeHandle}

frontend/packages/pydantic-forms/src/core/hooks/usePydanticForm.tsx

@@ -25,21 +25,21 @@ export interface UsePydanticFormReturn {
     isSending: boolean;
     pydanticFormSchema?: PydanticFormSchema;
     defaultValues: FieldValues;
-    handleRemoveValidationError: (location: string[]) => void;
+    handleRemoveValidationError: (location: string) => void;
 }
 
 const removeValidationErrorByLoc = (
     validationErrors: PydanticFormValidationErrorDetails | null,
-    locToRemove: (string | number)[]
+    locToRemove: string,
 ): PydanticFormValidationErrorDetails | null => {
-
     if (!validationErrors) return null;
 
-    const newSource = validationErrors.source.filter(
-        (err) => JSON.stringify(err.loc) !== JSON.stringify(locToRemove)
-    );
+    const newSource = validationErrors.source.filter((err) => {
+        const locPath = err.loc.join('.'); // e.g. "contact_persons.0.email"
+        return locPath !== locToRemove;
+    });
 
-    const topKey = locToRemove[0]?.toString();
+    const [topKey] = locToRemove.split('.'); // e.g. "contact_persons"
     const newMapped = { ...validationErrors.mapped };
 
     if (topKey && newMapped[topKey]) {
@@ -51,7 +51,7 @@ const removeValidationErrorByLoc = (
         source: newSource,
         mapped: newMapped,
     };
-}
+};
 
 export function usePydanticForm(
     formKey: string,
@@ -63,7 +63,6 @@ export function usePydanticForm(
         response: PydanticFormSuccessResponse,
     ) => void,
     formStep?: FieldValues,
-
 ): UsePydanticFormReturn {
     const emptyRawSchema: PydanticFormSchemaRawJson = useMemo(
         () => ({
@@ -158,11 +157,12 @@ export function usePydanticForm(
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [apiResponse]);
 
-    const handleRemoveValidationError = (location: string[]) => {
-        setValidationErrorsDetails((prev) =>
-            removeValidationErrorByLoc(prev, location)
-        );
-    }
+    const handleRemoveValidationError = (location: string) => {
+        setValidationErrorsDetails((prev) => {
+            const updatedErrors = removeValidationErrorByLoc(prev, location);
+            return updatedErrors;
+        });
+    };
 
     return {
         validationErrorsDetails,
@@ -173,6 +173,6 @@ export function usePydanticForm(
         pydanticFormSchema,
         defaultValues,
         isSending,
-        handleRemoveValidationError
+        handleRemoveValidationError,
     };
 }