💩 [open-formulieren/open-forms#4699] Trigger AddressNL validation after dirty

Author: robinmolen

src/formio/components/AddressNL.jsx

@@ -3,12 +3,13 @@
  */
 import {Formik, useFormikContext} from 'formik';
 import debounce from 'lodash/debounce';
-import {useContext, useEffect} from 'react';
+import isEqual from 'lodash/isEqual';
+import {useContext, useEffect, useState} from 'react';
 import {createRoot} from 'react-dom/client';
 import {Formio} from 'react-formio';
 import {FormattedMessage, IntlProvider, defineMessages, useIntl} from 'react-intl';
 import {z} from 'zod';
-import {toFormikValidationSchema} from 'zod-formik-adapter';
+import {toFormikValidate, toFormikValidationSchema} from 'zod-formik-adapter';
 
 import {ConfigContext} from 'Context';
 import {get} from 'api';
@@ -299,6 +300,7 @@ const addressNLSchema = (required, intl, {postcode = {}, city = {}}) => {
 
 const AddressNLForm = ({initialValues, required, deriveAddress, layout, setFormioValues}) => {
   const intl = useIntl();
+  const [dirty, setDirty] = useState(false);
 
   const {
     component: {
@@ -347,35 +349,46 @@ const AddressNLForm = ({initialValues, required, deriveAddress, layout, setFormi
         city: true,
       }}
       validateOnChange={false}
-      validationSchema={toFormikValidationSchema(
-        addressNLSchema(required, intl, {
-          postcode: {
-            pattern: postcodePattern,
-            errorMessage: postcodeError,
-          },
-          city: {
-            pattern: cityPattern,
-            errorMessage: cityError,
-          },
-        }),
-        {errorMap}
-      )}
+      validate={values =>
+        dirty
+          ? toFormikValidate(
+              addressNLSchema(required, intl, {
+                postcode: {
+                  pattern: postcodePattern,
+                  errorMessage: postcodeError,
+                },
+                city: {
+                  pattern: cityPattern,
+                  errorMessage: cityError,
+                },
+              }),
+              {errorMap}
+            )(values)
+          : {}
+      }
     >
       <FormikAddress
         required={required}
         setFormioValues={setFormioValues}
         deriveAddress={deriveAddress}
         layout={layout}
+        setDirty={setDirty}
       />
     </Formik>
   );
 };
 
-const FormikAddress = ({required, setFormioValues, deriveAddress, layout}) => {
-  const {values, isValid, setFieldValue} = useFormikContext();
+const FormikAddress = ({required, setFormioValues, deriveAddress, layout, setDirty}) => {
+  const {values, isValid, setFieldValue, dirty} = useFormikContext();
   const {baseUrl} = useContext(ConfigContext);
   const useColumns = layout === 'doubleColumn';
 
+  useEffect(() => {
+    if (dirty) {
+      setDirty(dirty);
+    }
+  }, [dirty, setDirty]);
+
   useEffect(() => {
     // *always* synchronize the state up, since:
     //