|
3 | 3 | */
|
4 | 4 | import {Formik, useFormikContext} from 'formik';
|
5 | 5 | import debounce from 'lodash/debounce';
|
6 |
| -import {useContext, useEffect} from 'react'; |
| 6 | +import isEqual from 'lodash/isEqual'; |
| 7 | +import {useContext, useEffect, useState} from 'react'; |
7 | 8 | import {createRoot} from 'react-dom/client';
|
8 | 9 | import {Formio} from 'react-formio';
|
9 | 10 | import {FormattedMessage, IntlProvider, defineMessages, useIntl} from 'react-intl';
|
10 | 11 | import {z} from 'zod';
|
11 |
| -import {toFormikValidationSchema} from 'zod-formik-adapter'; |
| 12 | +import {toFormikValidate, toFormikValidationSchema} from 'zod-formik-adapter'; |
12 | 13 |
|
13 | 14 | import {ConfigContext} from 'Context';
|
14 | 15 | import {get} from 'api';
|
@@ -299,6 +300,7 @@ const addressNLSchema = (required, intl, {postcode = {}, city = {}}) => {
|
299 | 300 |
|
300 | 301 | const AddressNLForm = ({initialValues, required, deriveAddress, layout, setFormioValues}) => {
|
301 | 302 | const intl = useIntl();
|
| 303 | + const [dirty, setDirty] = useState(false); |
302 | 304 |
|
303 | 305 | const {
|
304 | 306 | component: {
|
@@ -347,35 +349,46 @@ const AddressNLForm = ({initialValues, required, deriveAddress, layout, setFormi
|
347 | 349 | city: true,
|
348 | 350 | }}
|
349 | 351 | 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 | + } |
363 | 369 | >
|
364 | 370 | <FormikAddress
|
365 | 371 | required={required}
|
366 | 372 | setFormioValues={setFormioValues}
|
367 | 373 | deriveAddress={deriveAddress}
|
368 | 374 | layout={layout}
|
| 375 | + setDirty={setDirty} |
369 | 376 | />
|
370 | 377 | </Formik>
|
371 | 378 | );
|
372 | 379 | };
|
373 | 380 |
|
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(); |
376 | 383 | const {baseUrl} = useContext(ConfigContext);
|
377 | 384 | const useColumns = layout === 'doubleColumn';
|
378 | 385 |
|
| 386 | + useEffect(() => { |
| 387 | + if (dirty) { |
| 388 | + setDirty(dirty); |
| 389 | + } |
| 390 | + }, [dirty, setDirty]); |
| 391 | + |
379 | 392 | useEffect(() => {
|
380 | 393 | // *always* synchronize the state up, since:
|
381 | 394 | //
|
|
0 commit comments