Skip to content

Commit e321f06

Browse files
committed
💩 [open-formulieren/open-forms#4699] Trigger AddressNL validation after dirty
1 parent 74147f9 commit e321f06

File tree

1 file changed

+30
-17
lines changed

1 file changed

+30
-17
lines changed

src/formio/components/AddressNL.jsx

+30-17
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@
33
*/
44
import {Formik, useFormikContext} from 'formik';
55
import debounce from 'lodash/debounce';
6-
import {useContext, useEffect} from 'react';
6+
import isEqual from 'lodash/isEqual';
7+
import {useContext, useEffect, useState} from 'react';
78
import {createRoot} from 'react-dom/client';
89
import {Formio} from 'react-formio';
910
import {FormattedMessage, IntlProvider, defineMessages, useIntl} from 'react-intl';
1011
import {z} from 'zod';
11-
import {toFormikValidationSchema} from 'zod-formik-adapter';
12+
import {toFormikValidate, toFormikValidationSchema} from 'zod-formik-adapter';
1213

1314
import {ConfigContext} from 'Context';
1415
import {get} from 'api';
@@ -299,6 +300,7 @@ const addressNLSchema = (required, intl, {postcode = {}, city = {}}) => {
299300

300301
const AddressNLForm = ({initialValues, required, deriveAddress, layout, setFormioValues}) => {
301302
const intl = useIntl();
303+
const [dirty, setDirty] = useState(false);
302304

303305
const {
304306
component: {
@@ -347,35 +349,46 @@ const AddressNLForm = ({initialValues, required, deriveAddress, layout, setFormi
347349
city: true,
348350
}}
349351
validateOnChange={false}
350-
validationSchema={toFormikValidationSchema(
351-
addressNLSchema(required, intl, {
352-
postcode: {
353-
pattern: postcodePattern,
354-
errorMessage: postcodeError,
355-
},
356-
city: {
357-
pattern: cityPattern,
358-
errorMessage: cityError,
359-
},
360-
}),
361-
{errorMap}
362-
)}
352+
validate={values =>
353+
dirty
354+
? toFormikValidate(
355+
addressNLSchema(required, intl, {
356+
postcode: {
357+
pattern: postcodePattern,
358+
errorMessage: postcodeError,
359+
},
360+
city: {
361+
pattern: cityPattern,
362+
errorMessage: cityError,
363+
},
364+
}),
365+
{errorMap}
366+
)(values)
367+
: {}
368+
}
363369
>
364370
<FormikAddress
365371
required={required}
366372
setFormioValues={setFormioValues}
367373
deriveAddress={deriveAddress}
368374
layout={layout}
375+
setDirty={setDirty}
369376
/>
370377
</Formik>
371378
);
372379
};
373380

374-
const FormikAddress = ({required, setFormioValues, deriveAddress, layout}) => {
375-
const {values, isValid, setFieldValue} = useFormikContext();
381+
const FormikAddress = ({required, setFormioValues, deriveAddress, layout, setDirty}) => {
382+
const {values, isValid, setFieldValue, dirty} = useFormikContext();
376383
const {baseUrl} = useContext(ConfigContext);
377384
const useColumns = layout === 'doubleColumn';
378385

386+
useEffect(() => {
387+
if (dirty) {
388+
setDirty(dirty);
389+
}
390+
}, [dirty, setDirty]);
391+
379392
useEffect(() => {
380393
// *always* synchronize the state up, since:
381394
//

0 commit comments

Comments
 (0)