✨ [open-formulieren/open-forms#4420] Validation for AddressNL fields

src/formio/components/AddressNL.js

@@ -155,6 +155,7 @@ export default class AddressNL extends Field {
           value={{
             baseUrl: this.options.baseUrl,
             requiredFieldsWithAsterisk: this.options.evalContext.requiredFieldsWithAsterisk,
+            component: this.component,
           }}
         >
           <AddressNLForm
@@ -386,10 +387,15 @@ const FormikAddress = ({required, setFormioValues, deriveAddress, layout}) => {
 };
 
 const PostCodeField = ({required, autoFillAddress}) => {
+  const intl = useIntl();
   const {values, setFieldValue, getFieldProps} = useFormikContext();
   const {onBlur: onBlurFormik} = getFieldProps('postcode');
   const postcode = values['postcode'];
 
+  const {component} = useContext(ConfigContext);
+
+  const postcodePattern = new RegExp(component.components.postcode.validate.pattern);
+
   const onBlur = event => {
     onBlurFormik(event);
     // format the postcode with a space in between
@@ -402,13 +408,22 @@ const PostCodeField = ({required, autoFillAddress}) => {
     autoFillAddress();
   };
 
+  const validate = data => {
+    let error;
+    if (!postcodePattern.test(data)) {
+      error = component.components.postcode.translatedErrors[intl.locale].pattern;
+    }
+    return error;
+  };
+
   return (
     <TextField
       name="postcode"
       label={<FormattedMessage {...FIELD_LABELS.postcode} />}
       placeholder="1234 AB"
       isRequired={required}
       onBlur={onBlur}
+      validate={validate}
     />
   );
 };

src/formio/components/AddressNL.stories.js

@@ -22,6 +22,16 @@ export default {
       validate: {
         required: true,
       },
+      components: {
+        postcode: {
+          validate: {pattern: '1015 [a-zA-Z]{2}'},
+          translatedErrors: {
+            nl: {
+              pattern: 'De postcode moet beginnen met 1015',
+            },
+          },
+        },
+      },
     },
     evalContext: {},
   },