Issue/intl form implementation

src/components/form/form/form.tsx

@@ -6,6 +6,7 @@ import { Attribute, AttributeData } from "../../../lib/data/attributedata";
 import { FormField } from "../../../lib/form/typeguards";
 import { getValueFromFormData, serializeForm } from "../../../lib/form/utils";
 import {
+  DEFAULT_VALIDATION_ERROR_REQUIRED,
   Validator,
   getErrorFromErrors,
   validateForm,
@@ -59,6 +60,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 +102,7 @@ export const Form: React.FC<FormProps> = ({
   initialValues = {},
   secondaryActions = [],
   labelSubmit = "",
+  labelValidationErrorRequired = "",
   nonFieldErrors,
   onChange,
   onSubmit,
@@ -129,6 +134,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 +218,16 @@ export const Form: React.FC<FormProps> = ({
               getValueFromFormData(fields, valuesState, field);
 
             const error = getErrorFromErrors(fields, errorsState, field);
+            const message =
+              error === DEFAULT_VALIDATION_ERROR_REQUIRED
+                ? _labelValidationErrorRequired
+                : error;
+
             return (
               <FormControl
                 key={field.id || index}
                 direction={direction}
-                error={error}
+                error={message}
                 forceShowError={!validateOnChange}
                 value={value}
                 onChange={defaultOnChange}

src/lib/form/validation.ts

@@ -3,6 +3,8 @@ import { formatMessage } from "../i18n";
 import { FormField } from "./typeguards";
 import { parseFieldName } from "./utils";
 
+export const DEFAULT_VALIDATION_ERROR_REQUIRED = 'Veld "{name}" is verplicht';
+
 export type Validator = (
   value: unknown,
   field: FormField,
@@ -11,14 +13,15 @@ export type Validator = (
 
 /**
  * Validators whether `value` is set on `field` and `field` is required.
+ * If `message` is set, it will be used as error message, our `form` component has the option to set a custom message via props.
  * @param value
  * @param field
  * @param message
  */
 export const validateRequired: Validator = (
   value,
   field,
-  message = 'Field "{name}" is required',
+  message = DEFAULT_VALIDATION_ERROR_REQUIRED,
 ) => {
   // Not required, don't validate.
   if (!field.required || value) {

src/lib/i18n/compiled/en.json

@@ -20,6 +20,7 @@
   "mykn.components.DatePicker.labelWeek": "Week",
   "mykn.components.DatePicker.labelWeekPrefix": "Week",
   "mykn.components.Form.labelSubmit": "submit",
+  "mykn.components.Form.labelValidationErrorRequired": "Field {name} is required",
   "mykn.components.Kanban.labelMoveObject": "change position of item",
   "mykn.components.Kanban.labelSelectColumn": "move item to column",
   "mykn.components.Logo.hrefLabel": "Go to \"{href}\"",

src/lib/i18n/compiled/nl.json

@@ -20,6 +20,7 @@
   "mykn.components.DatePicker.labelWeek": "Week",
   "mykn.components.DatePicker.labelWeekPrefix": "week",
   "mykn.components.Form.labelSubmit": "verzenden",
+  "mykn.components.Form.labelValidationErrorRequired": "Veld {name} is verplicht",
   "mykn.components.Kanban.labelMoveObject": "wijzig positie van onderdeel",
   "mykn.components.Kanban.labelSelectColumn": "verplaats onderdeel naar kolom",
   "mykn.components.Logo.hrefLabel": "Navigeer naar \"{href}\"",

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": "Field {name} is required",
+    "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",

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",