Fix for error message value injection

dnbexperience · Nov 13, 2023 · 5f17902 · 5f17902
1 parent b348a59
commit 5f17902
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 8 deletions.
diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/String.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/String/__tests__/String.test.tsx
@@ -603,6 +603,38 @@ describe('Field.String', () => {
         })
       })
     })
+
+    describe('errorMessages', () => {
+      it('should show provided errorMessages based on validation rule', () => {
+        render(
+          <Field.String
+            emptyValue=""
+            value=""
+            errorMessages={{
+              required: 'You need this',
+            }}
+            required
+            validateInitially
+          />
+        )
+        expect(screen.getByText('You need this')).toBeInTheDocument()
+      })
+
+      it('should show provided errorMessages based on validation rule with injected value', () => {
+        render(
+          <Field.String
+            emptyValue=""
+            value=""
+            errorMessages={{
+              minLength: 'At least {minLength}..',
+            }}
+            minLength={4}
+            validateInitially
+          />
+        )
+        expect(screen.getByText('At least 4..')).toBeInTheDocument()
+      })
+    })
   })
 
   describe('with data context', () => {

diff --git a/packages/dnb-eufemia/src/extensions/forms/hooks/useDataValue.ts b/packages/dnb-eufemia/src/extensions/forms/hooks/useDataValue.ts
@@ -170,18 +170,28 @@ export default function useDataValue<
    * Prepare error from validation logic with correct error messages based on props
    */
   const prepareError = useCallback(
-    (error: Error | FormError | undefined): FormError => {
+    (error: Error | FormError | undefined): FormError | undefined => {
       if (error === undefined) {
         return
       }
-      const withCorrectMessage =
+
+      if (
         error instanceof FormError &&
         typeof error.validationRule === 'string' &&
-        errorMessagesRef?.[error.validationRule] !== undefined
-          ? new FormError(errorMessagesRef[error.validationRule])
-          : error
-      return withCorrectMessage
+        errorMessagesRef.current?.[error.validationRule] !== undefined
+      ) {
+        const message = errorMessagesRef.current[
+          error.validationRule
+        ].replace(
+          `{${error.validationRule}}`,
+          props?.[error.validationRule]
+        )
+        return new FormError(message)
+      }
+
+      return error
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   )
 
@@ -290,8 +300,8 @@ export default function useDataValue<
 
   const dataContextError = path ? dataContextErrors?.[path] : undefined
   useEffect(() => {
-    contextErrorRef.current = dataContextError
-  }, [dataContextError])
+    contextErrorRef.current = prepareError(dataContextError)
+  }, [dataContextError, prepareError])
 
   useEffect(() => {
     if (dataContext.showAllErrors) {