2286: Form validation issues fix (#198)

* Fix validation error not resetting when form field has change

* Validation error improvements

* Add changeset

---------

Co-authored-by: Georgi2704 <[email protected]>

Author: Georgi2704

frontend/.changeset/spicy-kings-attack.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': minor
+---
+
+Fix validation error not resetting when form field has change

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

@@ -62,6 +62,7 @@ export const PydanticFormHandler = ({
         isLoading,
         pydanticFormSchema,
         defaultValues,
+        handleRemoveValidationError,
     } = usePydanticForm(
         formKey,
         formId,
@@ -110,6 +111,7 @@ export const PydanticFormHandler = ({
                 onPrevious={onPrevious}
                 pydanticFormSchema={pydanticFormSchema}
                 title={title}
+                handleRemoveValidationError={handleRemoveValidationError}
             />
         </PydanticFormValidationErrorContext.Provider>
     );

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

@@ -5,7 +5,7 @@
  *
  * Here we define the outline of the form
  */
-import React from 'react';
+import React, { useEffect } from 'react';
 import type { FieldValues } from 'react-hook-form';
 import { FormProvider, useForm } from 'react-hook-form';
 
@@ -36,6 +36,7 @@ export interface ReactHookFormProps {
     onPrevious: () => void;
     pydanticFormSchema?: PydanticFormSchema;
     title?: string;
+    handleRemoveValidationError: (location: string) => void;
 }
 
 export const ReactHookForm = ({
@@ -51,6 +52,7 @@ export const ReactHookForm = ({
     onPrevious,
     pydanticFormSchema,
     title,
+    handleRemoveValidationError,
 }: ReactHookFormProps) => {
     const config = useGetConfig();
     const t = useTranslations('renderForm');
@@ -73,6 +75,13 @@ export const ReactHookForm = ({
         values: initialValues || defaultValues,
     });
 
+    useEffect(() => {
+        const reactHookFormWatch = reactHookForm.watch(
+            (_, { name }) => name && handleRemoveValidationError(name),
+        );
+        return reactHookFormWatch.unsubscribe;
+    }, [handleRemoveValidationError, reactHookForm]);
+
     if (apiError) {
         console.error('API Error:', apiError);
         return ErrorComponent;

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,8 +25,34 @@ export interface UsePydanticFormReturn {
     isSending: boolean;
     pydanticFormSchema?: PydanticFormSchema;
     defaultValues: FieldValues;
+    handleRemoveValidationError: (location: string) => void;
 }
 
+const removeValidationErrorByLoc = (
+    validationErrors: PydanticFormValidationErrorDetails | null,
+    locToRemove: string,
+): PydanticFormValidationErrorDetails | null => {
+    if (!validationErrors) return null;
+
+    const newSource = validationErrors.source.filter((err) => {
+        const locPath = err.loc.join('.'); // e.g. "contact_persons.0.email"
+        return locPath !== locToRemove;
+    });
+
+    const [topKey] = locToRemove.split('.'); // e.g. "contact_persons"
+    const newMapped = { ...validationErrors.mapped };
+
+    if (topKey && newMapped[topKey]) {
+        delete newMapped[topKey];
+    }
+
+    return {
+        ...validationErrors,
+        source: newSource,
+        mapped: newMapped,
+    };
+};
+
 export function usePydanticForm(
     formKey: string,
     formId: string,
@@ -131,6 +157,13 @@ export function usePydanticForm(
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [apiResponse]);
 
+    const handleRemoveValidationError = (location: string) => {
+        setValidationErrorsDetails((prev) => {
+            const updatedErrors = removeValidationErrorByLoc(prev, location);
+            return updatedErrors;
+        });
+    };
+
     return {
         validationErrorsDetails,
         apiError,
@@ -140,5 +173,6 @@ export function usePydanticForm(
         pydanticFormSchema,
         defaultValues,
         isSending,
+        handleRemoveValidationError,
     };
 }