Fix validation error not resetting when form field has change

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,6 +68,7 @@ export const PydanticFormHandler = ({
         isLoading,
         pydanticFormSchema,
         defaultValues,
+        handleRemoveValidationError
     } = usePydanticForm(
         formKey,
         config,
@@ -117,6 +118,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/hooks/usePydanticForm.tsx

@@ -25,6 +25,32 @@ export interface UsePydanticFormReturn {
     isSending: boolean;
     pydanticFormSchema?: PydanticFormSchema;
     defaultValues: FieldValues;
+    handleRemoveValidationError: (location: string[]) => void;
+}
+
+const removeValidationErrorByLoc = (
+    validationErrors: PydanticFormValidationErrorDetails | null,
+    locToRemove: (string | number)[]
+): PydanticFormValidationErrorDetails | null => {
+
+    if (!validationErrors) return null;
+
+    const newSource = validationErrors.source.filter(
+        (err) => JSON.stringify(err.loc) !== JSON.stringify(locToRemove)
+    );
+
+    const topKey = locToRemove[0]?.toString();
+    const newMapped = { ...validationErrors.mapped };
+
+    if (topKey && newMapped[topKey]) {
+        delete newMapped[topKey];
+    }
+
+    return {
+        ...validationErrors,
+        source: newSource,
+        mapped: newMapped,
+    };
 }
 
 export function usePydanticForm(
@@ -37,6 +63,7 @@ export function usePydanticForm(
         response: PydanticFormSuccessResponse,
     ) => void,
     formStep?: FieldValues,
+
 ): UsePydanticFormReturn {
     const emptyRawSchema: PydanticFormSchemaRawJson = useMemo(
         () => ({
@@ -131,6 +158,12 @@ export function usePydanticForm(
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [apiResponse]);
 
+    const handleRemoveValidationError = (location: string[]) => {
+        setValidationErrorsDetails((prev) =>
+            removeValidationErrorByLoc(prev, location)
+        );
+    }
+
     return {
         validationErrorsDetails,
         apiError,
@@ -140,5 +173,6 @@ export function usePydanticForm(
         pydanticFormSchema,
         defaultValues,
         isSending,
+        handleRemoveValidationError
     };
 }