✨ [open-formulieren/open-forms#4420] Field validation for AddressNL

the following components can now be validated using regex: * postcode * city
open-formulieren · Jul 30, 2024 · 78c9ade · 78c9ade
1 parent 9cda8f3
commit 78c9ade
Show file tree

Hide file tree

Showing 3 changed files with 158 additions and 4 deletions.
diff --git a/src/components/ComponentConfiguration.stories.tsx b/src/components/ComponentConfiguration.stories.tsx
@@ -2222,6 +2222,16 @@ export const AddressNL: Story = {
       },
       deriveAddress: false,
       layout: 'singleColumn',
+      ofComponents: {
+        postcode: {
+          validate: {pattern: '1015 [a-zA-Z]{2}'},
+          translatedErrors: {},
+        },
+        city: {
+          validate: {pattern: 'Amsterdam'},
+          translatedErrors: {},
+        },
+      },
     },
     builderInfo: {
       title: 'Address Field',

diff --git a/src/components/builder/validate/i18n.tsx b/src/components/builder/validate/i18n.tsx
@@ -9,12 +9,12 @@ 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>[],
+  field: string = 'translatedErrors'
 ): void {
   const {supportedLanguageCodes} = useContext(BuilderContext);
-  const [{value}, , {setValue}] = useField<S['translatedErrors']>('translatedErrors');
+  const [{value}, , {setValue}] = useField<S['translatedErrors']>(field);
 
-  // set any missing translations
   useEffect(() => {
     const newValue = value
       ? {...value}

diff --git a/src/registry/addressNL/edit.tsx b/src/registry/addressNL/edit.tsx
@@ -1,4 +1,6 @@
 import {AddressNLComponentSchema} from '@open-formulieren/types';
+import {TextField} from 'components/formio';
+import {useContext} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
 import {
@@ -19,12 +21,71 @@ import {
 } from '@/components/builder';
 import {LABELS} from '@/components/builder/messages';
 import {Checkbox} from '@/components/formio';
-import {TabList, TabPanel, Tabs} from '@/components/formio';
+import {DataMap, Panel, Tab, TabList, TabPanel, Tabs} from '@/components/formio';
 import {Select} from '@/components/formio';
+import {BuilderContext} from '@/context';
 import {useErrorChecker} from '@/utils/errors';
 
 import {EditFormDefinition} from '../types';
 
+export interface SubcomponentValidationProps {
+  component: string;
+  label: React.ReactNode;
+  tooltip: string;
+  placeholder: string;
+}
+
+const SubcomponentValidation: React.FC<SubcomponentValidationProps> = ({
+  component,
+  label,
+  tooltip,
+  placeholder,
+}) => {
+  const {supportedLanguageCodes} = useContext(BuilderContext);
+  return (
+    <>
+      <TextField
+        name={`ofComponents.${component}.validate.pattern`}
+        label={label}
+        tooltip={tooltip}
+        placeholder={placeholder}
+      />
+      <Tabs>
+        <TabList>
+          {supportedLanguageCodes.map(code => (
+            <Tab key={code}>{code.toUpperCase()}</Tab>
+          ))}
+        </TabList>
+
+        {supportedLanguageCodes.map(code => (
+          <TabPanel key={code}>
+            <DataMap
+              name={`ofComponents.${component}.translatedErrors.${code}`}
+              keyLabel={
+                <FormattedMessage
+                  description="Label for translation of validation error code"
+                  defaultMessage="Error code"
+                />
+              }
+              valueComponent={
+                <TextField
+                  name="message"
+                  label={
+                    <FormattedMessage
+                      description="Label for translation message for validation error code"
+                      defaultMessage="Error message"
+                    />
+                  }
+                />
+              }
+            />
+          </TabPanel>
+        ))}
+      </Tabs>
+    </>
+  );
+};
+
 const DeriveAddress = () => {
   const intl = useIntl();
   const tooltip = intl.formatMessage({
@@ -81,6 +142,9 @@ const EditForm: EditFormDefinition<AddressNLComponentSchema> = () => {
   const [isKeyManuallySetRef, generatedKey] = useDeriveComponentKey();
   const {hasAnyError} = useErrorChecker<AddressNLComponentSchema>();
   Validate.useManageValidatorsTranslations<AddressNLComponentSchema>(['required']);
+  Validate.useManageValidatorsTranslations(['pattern'], `ofComponents.postcode.translatedErrors`);
+  Validate.useManageValidatorsTranslations(['pattern'], `ofComponents.city.translatedErrors`);
+
   return (
     <Tabs>
       <TabList>
@@ -128,6 +192,76 @@ const EditForm: EditFormDefinition<AddressNLComponentSchema> = () => {
         <Validate.Required />
         <Validate.ValidatorPluginSelect />
         <Validate.ValidationErrorTranslations />
+
+        {/* Postcode field validation */}
+        <Panel
+          title={
+            <FormattedMessage
+              description="Title of postcode field validation panel"
+              defaultMessage="Postcode"
+            />
+          }
+          tooltip={intl.formatMessage({
+            description: 'Tooltip postcode field validation panel',
+            defaultMessage: 'Validation for the postcode field',
+          })}
+          collapsible
+          initialCollapsed
+        >
+          <SubcomponentValidation
+            component="postcode"
+            label={
+              <FormattedMessage
+                description="Label for 'validate.pattern' builder field"
+                defaultMessage="Regular expression for postcode"
+              />
+            }
+            tooltip={intl.formatMessage({
+              description: "Tooltip for 'validate.pattern' builder field",
+              defaultMessage:
+                'The regular expression pattern test that the postcode field value must pass before the form can be submitted.',
+            })}
+            placeholder={intl.formatMessage({
+              description: "Placeholder for 'validate.pattern' builder field",
+              defaultMessage: 'Regular expression for postcode',
+            })}
+          />
+        </Panel>
+
+        {/* City field validation */}
+        <Panel
+          title={
+            <FormattedMessage
+              description="Title of city field validation panel"
+              defaultMessage="City"
+            />
+          }
+          tooltip={intl.formatMessage({
+            description: 'Tooltip city field validation panel',
+            defaultMessage: 'Validation for the city field',
+          })}
+          collapsible
+          initialCollapsed
+        >
+          <SubcomponentValidation
+            component="city"
+            label={
+              <FormattedMessage
+                description="Label for 'validate.pattern' builder field"
+                defaultMessage="Regular expression for city"
+              />
+            }
+            tooltip={intl.formatMessage({
+              description: "Tooltip for 'validate.pattern' builder field",
+              defaultMessage:
+                'The regular expression pattern test that the city field value must pass before the form can be submitted.',
+            })}
+            placeholder={intl.formatMessage({
+              description: "Placeholder for 'validate.pattern' builder field",
+              defaultMessage: 'Regular expression for city',
+            })}
+          />
+        </Panel>
       </TabPanel>
 
       {/* Registration tab */}
@@ -192,6 +326,16 @@ EditForm.defaultValues = {
   registration: {
     attribute: '',
   },
+  ofComponents: {
+    postcode: {
+      validate: {pattern: ''},
+      translatedErrors: {},
+    },
+    city: {
+      validate: {pattern: ''},
+      translatedErrors: {},
+    },
+  },
 };
 
 export default EditForm;