✨ [#4420] Validation for fields within AddressNL component

i18n/messages/en.json

@@ -49,6 +49,16 @@
     "description": "Tooltip for 'showInPDF' builder field",
     "originalDefault": "Whether to show this value in the confirmation PDF"
   },
+  "0D+m56": {
+    "defaultMessage": "Regular expression for city",
+    "description": "Placeholder for 'validate.pattern' builder field",
+    "originalDefault": "Regular expression for city"
+  },
+  "0FD2pY": {
+    "defaultMessage": "Validation for the postcode field",
+    "description": "Tooltip postcode field validation panel",
+    "originalDefault": "Validation for the postcode field"
+  },
   "0OP7ho": {
     "defaultMessage": "Receives confirmation email",
     "description": "Label for 'confirmationRecipient' builder field",
@@ -154,6 +164,11 @@
     "description": "Label for 'delta.days' in relative delta date constraint validation",
     "originalDefault": "Days"
   },
+  "4DrI94": {
+    "defaultMessage": "Regular expression for postcode",
+    "description": "Label for 'validate.pattern' builder field",
+    "originalDefault": "Regular expression for postcode"
+  },
   "4HBnrF": {
     "defaultMessage": "Drag or <browse>select</browse> files to upload.",
     "description": "file component: drag/select files to upload text",
@@ -774,6 +789,11 @@
     "description": "Tooltip for 'prefill.identifierRole' builder field",
     "originalDefault": "In case that multiple identifiers are returned (in the case of eHerkenning bewindvoering and DigiD Machtigen), should the prefill data related to the main identifier be used, or that related to the authorised person?"
   },
+  "WxwqZJ": {
+    "defaultMessage": "The regular expression pattern test that the postcode field value must pass before the form can be submitted.",
+    "description": "Tooltip for 'validate.pattern' builder field",
+    "originalDefault": "The regular expression pattern test that the postcode field value must pass before the form can be submitted."
+  },
   "XMV3t2": {
     "defaultMessage": "Info",
     "description": "Label for content component CSS class 'info' option",
@@ -929,6 +949,11 @@
     "description": "'Remove item' screenreader button text",
     "originalDefault": "Remove item"
   },
+  "dD9O3Q": {
+    "defaultMessage": "Regular expression for postcode",
+    "description": "Placeholder for 'validate.pattern' builder field",
+    "originalDefault": "Regular expression for postcode"
+  },
   "dJNdhr": {
     "defaultMessage": "Cancel",
     "description": "Cancel component configuration button",
@@ -1029,6 +1054,11 @@
     "description": "Description for the 'openForms.itemsExpression' builder field",
     "originalDefault": "A JSON logic expression returning a variable (of array type) whose items should be used as the options for this component."
   },
+  "fhVFUY": {
+    "defaultMessage": "City",
+    "description": "Title of city field validation panel",
+    "originalDefault": "City"
+  },
   "gCQtSJ": {
     "defaultMessage": "Set the text of the 'Remove row' button.",
     "description": "Tooltip for 'removeRow' builder field",
@@ -1049,6 +1079,11 @@
     "description": "Fieldset preview content description",
     "originalDefault": "Fieldset content"
   },
+  "hEVgKd": {
+    "defaultMessage": "Error message for \"{key}\"",
+    "description": "Accessible label for error message input field",
+    "originalDefault": "Error message for \"{key}\""
+  },
   "hJtTwo": {
     "defaultMessage": "Form",
     "description": "Component 'Rich' preview mode",
@@ -1189,6 +1224,11 @@
     "description": "Tooltip for option/choice description",
     "originalDefault": "Optionally provide additional information to explain the meaning of the option."
   },
+  "mck25o": {
+    "defaultMessage": "Validation for the city field",
+    "description": "Tooltip city field validation panel",
+    "originalDefault": "Validation for the city field"
+  },
   "mf9eF+": {
     "defaultMessage": "House number",
     "description": "Label for address housenumber",
@@ -1254,6 +1294,11 @@
     "description": "Label for addressNL city read only result",
     "originalDefault": "City"
   },
+  "osl4X2": {
+    "defaultMessage": "The regular expression pattern test that the city field value must pass before the form can be submitted.",
+    "description": "Tooltip for 'validate.pattern' builder field",
+    "originalDefault": "The regular expression pattern test that the city field value must pass before the form can be submitted."
+  },
   "p7g2h+": {
     "defaultMessage": "Add another",
     "description": "Add another option button label",
@@ -1299,6 +1344,11 @@
     "description": "Component edit form tab title for 'Registration' tab",
     "originalDefault": "Registration"
   },
+  "rW1edF": {
+    "defaultMessage": "Postcode",
+    "description": "Title of postcode field validation panel",
+    "originalDefault": "Postcode"
+  },
   "rkJLBr": {
     "defaultMessage": "'Add another' text",
     "description": "Label for 'addAnother' builder field",
@@ -1324,6 +1374,11 @@
     "description": "Edit grid preview content description",
     "originalDefault": "{groupLabel} 3"
   },
+  "swKpQE": {
+    "defaultMessage": "Regular expression for city",
+    "description": "Label for 'validate.pattern' builder field",
+    "originalDefault": "Regular expression for city"
+  },
   "tU1UVF": {
     "defaultMessage": "The earliest possible value that can be entered.",
     "description": "Tooltip for 'validate.minTime' builder field",

i18n/messages/nl.json

@@ -49,6 +49,16 @@
     "description": "Tooltip for 'showInPDF' builder field",
     "originalDefault": "Whether to show this value in the confirmation PDF"
   },
+  "0D+m56": {
+    "defaultMessage": "Regular expression for city",
+    "description": "Placeholder for 'validate.pattern' builder field",
+    "originalDefault": "Regular expression for city"
+  },
+  "0FD2pY": {
+    "defaultMessage": "Validation for the postcode field",
+    "description": "Tooltip postcode field validation panel",
+    "originalDefault": "Validation for the postcode field"
+  },
   "0OP7ho": {
     "defaultMessage": "Ontvangt bevestigingsmail",
     "description": "Label for 'confirmationRecipient' builder field",
@@ -156,6 +166,11 @@
     "description": "Label for 'delta.days' in relative delta date constraint validation",
     "originalDefault": "Days"
   },
+  "4DrI94": {
+    "defaultMessage": "Regular expression for postcode",
+    "description": "Label for 'validate.pattern' builder field",
+    "originalDefault": "Regular expression for postcode"
+  },
   "4HBnrF": {
     "defaultMessage": "Sleep of <browse>selecteer</browse> bestanden om te uploaden.",
     "description": "file component: drag/select files to upload text",
@@ -784,6 +799,11 @@
     "description": "Tooltip for 'prefill.identifierRole' builder field",
     "originalDefault": "In case that multiple identifiers are returned (in the case of eHerkenning bewindvoering and DigiD Machtigen), should the prefill data related to the main identifier be used, or that related to the authorised person?"
   },
+  "WxwqZJ": {
+    "defaultMessage": "The regular expression pattern test that the postcode field value must pass before the form can be submitted.",
+    "description": "Tooltip for 'validate.pattern' builder field",
+    "originalDefault": "The regular expression pattern test that the postcode field value must pass before the form can be submitted."
+  },
   "XMV3t2": {
     "defaultMessage": "Info",
     "description": "Label for content component CSS class 'info' option",
@@ -941,6 +961,11 @@
     "description": "'Remove item' screenreader button text",
     "originalDefault": "Remove item"
   },
+  "dD9O3Q": {
+    "defaultMessage": "Regular expression for postcode",
+    "description": "Placeholder for 'validate.pattern' builder field",
+    "originalDefault": "Regular expression for postcode"
+  },
   "dJNdhr": {
     "defaultMessage": "Annuleren",
     "description": "Cancel component configuration button",
@@ -1042,6 +1067,11 @@
     "description": "Description for the 'openForms.itemsExpression' builder field",
     "originalDefault": "A JSON logic expression returning a variable (of array type) whose items should be used as the options for this component."
   },
+  "fhVFUY": {
+    "defaultMessage": "City",
+    "description": "Title of city field validation panel",
+    "originalDefault": "City"
+  },
   "gCQtSJ": {
     "defaultMessage": "Geef de knoptekst om een groep te verwijderen op.",
     "description": "Tooltip for 'removeRow' builder field",
@@ -1063,6 +1093,11 @@
     "description": "Fieldset preview content description",
     "originalDefault": "Fieldset content"
   },
+  "hEVgKd": {
+    "defaultMessage": "Error message for \"{key}\"",
+    "description": "Accessible label for error message input field",
+    "originalDefault": "Error message for \"{key}\""
+  },
   "hJtTwo": {
     "defaultMessage": "Formulierveld",
     "description": "Component 'Rich' preview mode",
@@ -1205,6 +1240,11 @@
     "description": "Tooltip for option/choice description",
     "originalDefault": "Optionally provide additional information to explain the meaning of the option."
   },
+  "mck25o": {
+    "defaultMessage": "Validation for the city field",
+    "description": "Tooltip city field validation panel",
+    "originalDefault": "Validation for the city field"
+  },
   "mf9eF+": {
     "defaultMessage": "Huisnummer",
     "description": "Label for address housenumber",
@@ -1272,6 +1312,11 @@
     "description": "Label for addressNL city read only result",
     "originalDefault": "City"
   },
+  "osl4X2": {
+    "defaultMessage": "The regular expression pattern test that the city field value must pass before the form can be submitted.",
+    "description": "Tooltip for 'validate.pattern' builder field",
+    "originalDefault": "The regular expression pattern test that the city field value must pass before the form can be submitted."
+  },
   "p7g2h+": {
     "defaultMessage": "Nog één toevoegen",
     "description": "Add another option button label",
@@ -1317,6 +1362,11 @@
     "description": "Component edit form tab title for 'Registration' tab",
     "originalDefault": "Registration"
   },
+  "rW1edF": {
+    "defaultMessage": "Postcode",
+    "description": "Title of postcode field validation panel",
+    "originalDefault": "Postcode"
+  },
   "rkJLBr": {
     "defaultMessage": "'Groep toevoegen'-tekst",
     "description": "Label for 'addAnother' builder field",
@@ -1343,6 +1393,11 @@
     "isTranslated": true,
     "originalDefault": "{groupLabel} 3"
   },
+  "swKpQE": {
+    "defaultMessage": "Regular expression for city",
+    "description": "Label for 'validate.pattern' builder field",
+    "originalDefault": "Regular expression for city"
+  },
   "tU1UVF": {
     "defaultMessage": "De minimale tijd die gekozen kan worden.",
     "description": "Tooltip for 'validate.minTime' builder field",

src/components/ComponentConfiguration.stories.tsx

@@ -2241,6 +2241,18 @@ export const AddressNL: Story = {
       },
       deriveAddress: false,
       layout: 'singleColumn',
+      openForms: {
+        components: {
+          postcode: {
+            validate: {pattern: '1015 [a-zA-Z]{2}'},
+            translatedErrors: {},
+          },
+          city: {
+            validate: {pattern: 'Amsterdam'},
+            translatedErrors: {},
+          },
+        },
+      },
     },
     builderInfo: {
       title: 'Address Field',

src/components/builder/validate/i18n.tsx

@@ -2,19 +2,20 @@ import {PossibleValidatorErrorKeys, SchemaWithValidation} from '@open-formuliere
 import {useField} from 'formik';
 import {isEqual} from 'lodash';
 import {useContext, useEffect} from 'react';
-import {FormattedMessage, useIntl} from 'react-intl';
+import {FormattedMessage, defineMessage, useIntl} from 'react-intl';
 
 import {BuilderContext} from '@/context';
 
 import {DataMap, Panel, Tab, TabList, TabPanel, Tabs, TextField} from '../../formio';
 
 export function useManageValidatorsTranslations<S extends SchemaWithValidation>(
-  keys: PossibleValidatorErrorKeys<S>[]
+  keys: PossibleValidatorErrorKeys<S>[],
+  prefix: string = ''
 ): void {
+  const fieldName = `${prefix}${prefix ? '.' : ''}translatedErrors`;
   const {supportedLanguageCodes} = useContext(BuilderContext);
-  const [{value}, , {setValue}] = useField<S['translatedErrors']>('translatedErrors');
+  const [{value}, , {setValue}] = useField<S['translatedErrors']>(fieldName);
 
-  // set any missing translations
   useEffect(() => {
     const newValue = value
       ? {...value}
@@ -68,6 +69,10 @@ const ValidationErrorTranslations = () => {
                   defaultMessage="Error code"
                 />
               }
+              ariaLabelMessage={defineMessage({
+                description: 'Accessible label for error message input field',
+                defaultMessage: 'Error message for "{key}"',
+              })}
               valueComponent={
                 <TextField
                   name="message"

src/components/formio/datamap.tsx

@@ -1,5 +1,6 @@
 import {useField} from 'formik';
 import React from 'react';
+import {MessageDescriptor, useIntl} from 'react-intl';
 
 import DataGrid, {DataGridRow} from './datagrid';
 import TextField from './textfield';
@@ -8,12 +9,19 @@ export interface DataMapProps {
   name: string;
   valueComponent: React.ReactElement;
   keyLabel: React.ReactNode;
+  ariaLabelMessage?: MessageDescriptor;
 }
 
 /**
  * Data map with readonly keys.
  */
-export const DataMap: React.FC<DataMapProps> = ({name, valueComponent, keyLabel = 'Key'}) => {
+export const DataMap: React.FC<DataMapProps> = ({
+  name,
+  valueComponent,
+  ariaLabelMessage,
+  keyLabel = 'Key',
+}) => {
+  const intl = useIntl();
   const [{value}, , {setValue}] = useField(name);
   const transformedValue = Object.entries(value).map(([key, value]) => ({key, value}));
   const columns = [keyLabel, valueComponent.props.label];
@@ -30,6 +38,9 @@ export const DataMap: React.FC<DataMapProps> = ({name, valueComponent, keyLabel
               const newValue = {...value, [item.key]: event.target.value};
               setValue(newValue);
             },
+            'aria-label': ariaLabelMessage
+              ? intl.formatMessage(ariaLabelMessage, {key: item.key})
+              : undefined,
           })}
         </DataGridRow>
       ))}