🐛 - fix: added intl to form component

maykinmedia · Jun 27, 2024 · c7c16b4 · c7c16b4
1 parent 7ef7d12
commit c7c16b4
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 1 deletion.
diff --git a/src/components/form/form/form.tsx b/src/components/form/form/form.tsx
@@ -59,6 +59,9 @@ export type FormProps = Omit<
   /** The submit form label. */
   labelSubmit?: string;
 
+  /** The validation error label */
+  labelValidationErrorRequired?: string;
+
   /**
    * (Built-in serialization only), whether the convert results to type inferred from input type (e.g. checkbox value
    * will be boolean).
@@ -98,6 +101,7 @@ export const Form: React.FC<FormProps> = ({
   initialValues = {},
   secondaryActions = [],
   labelSubmit = "",
+  labelValidationErrorRequired = "",
   nonFieldErrors,
   onChange,
   onSubmit,
@@ -129,6 +133,14 @@ export const Form: React.FC<FormProps> = ({
         defaultMessage: "verzenden",
       });
 
+  const _labelValidationErrorRequired = labelValidationErrorRequired
+    ? labelValidationErrorRequired
+    : intl.formatMessage({
+        id: "mykn.components.Form.labelValidationErrorRequired",
+        description: 'mykn.components.Form: The "required" validation error',
+        defaultMessage: "Veld {name} is verplicht",
+      });
+
   /**
    * Revalidate on state change.
    */
@@ -205,11 +217,16 @@ export const Form: React.FC<FormProps> = ({
               getValueFromFormData(fields, valuesState, field);
 
             const error = getErrorFromErrors(fields, errorsState, field);
+            const message =
+              error === 'Veld "{name}" is verplicht'
+                ? _labelValidationErrorRequired
+                : error;
+
             return (
               <FormControl
                 key={field.id || index}
                 direction={direction}
-                error={error}
+                error={message}
                 forceShowError={!validateOnChange}
                 value={value}
                 onChange={defaultOnChange}

diff --git a/src/lib/i18n/messages/en.json b/src/lib/i18n/messages/en.json
@@ -104,6 +104,11 @@
     "description": "mykn.components.Form: The submit form label",
     "originalDefault": "verzenden"
   },
+  "mykn.components.Form.labelValidationErrorRequired": {
+    "defaultMessage": "Veld {name} is verplicht",
+    "description": "mykn.components.Form: The \"required\" validation error",
+    "originalDefault": "Veld {name} is verplicht"
+  },
   "mykn.components.Kanban.labelMoveObject": {
     "defaultMessage": "change position of item",
     "description": "mykn.components.Kanban: The kanban \"move object position\" (accessible) label",

diff --git a/src/lib/i18n/messages/nl.json b/src/lib/i18n/messages/nl.json
@@ -104,6 +104,11 @@
     "description": "mykn.components.Form: The submit form label",
     "originalDefault": "verzenden"
   },
+  "mykn.components.Form.labelValidationErrorRequired": {
+    "defaultMessage": "Veld {name} is verplicht",
+    "description": "mykn.components.Form: The \"required\" validation error",
+    "originalDefault": "Veld {name} is verplicht"
+  },
   "mykn.components.Kanban.labelMoveObject": {
     "defaultMessage": "wijzig positie van onderdeel",
     "description": "mykn.components.Kanban: The kanban \"move object position\" (accessible) label",