diff --git a/src/formio/components/AddressNL.jsx b/src/formio/components/AddressNL.jsx index e2ab54c93..c7ea42587 100644 --- a/src/formio/components/AddressNL.jsx +++ b/src/formio/components/AddressNL.jsx @@ -3,7 +3,7 @@ */ import {Formik, useFormikContext} from 'formik'; import debounce from 'lodash/debounce'; -import {useContext, useEffect} from 'react'; +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'; @@ -77,6 +77,7 @@ export default class AddressNL extends Field { city: '', streetName: '', secretStreetCity: '', + autoPopulated: false, }; } @@ -199,6 +200,14 @@ const FIELD_LABELS = defineMessages({ description: 'Label for addressNL houseNumber input', defaultMessage: 'House number', }, + streetName: { + description: 'Label for addressNL streetName input', + defaultMessage: 'Street name', + }, + city: { + description: 'Label for addressNL city input', + defaultMessage: 'City', + }, }); const addressNLSchema = (required, intl, {postcode = {}, city = {}}) => { @@ -216,6 +225,7 @@ const addressNLSchema = (required, intl, {postcode = {}, city = {}}) => { }); let postcodeSchema = z.string().regex(postcodeRegex, {message: postcodeErrorMessage}); + let streetNameSchema = z.string(); const {pattern: cityPattern = '', errorMessage: cityErrorMessage = ''} = city; let citySchema = z.string(); if (cityPattern) { @@ -233,14 +243,15 @@ const addressNLSchema = (required, intl, {postcode = {}, city = {}}) => { }), }); if (!required) { - postcodeSchema = postcodeSchema.optional(); - houseNumberSchema = houseNumberSchema.optional(); + streetNameSchema = streetNameSchema.optional(); + citySchema = citySchema.optional(); } return z .object({ postcode: postcodeSchema, - city: citySchema.optional(), + streetName: streetNameSchema, + city: citySchema, houseNumber: houseNumberSchema, houseLetter: z .string() @@ -300,13 +311,15 @@ const AddressNLForm = ({initialValues, required, deriveAddress, layout, setFormi openForms: {components: nestedComponents}, }, } = useContext(ConfigContext); - const {postcode, city} = nestedComponents || {}; + const {postcode, city, streetName} = nestedComponents || {}; const postcodePattern = postcode?.validate?.pattern; const postcodeError = postcode?.translatedErrors[intl.locale].pattern; const cityPattern = city?.validate?.pattern; const cityError = city?.translatedErrors[intl.locale].pattern; + const streetNameError = streetName?.translatedErrors[intl.locale].pattern; + console.log(streetNameError, cityError); const errorMap = (issue, ctx) => { switch (issue.code) { case z.ZodIssueCode.invalid_type: { @@ -351,6 +364,9 @@ const AddressNLForm = ({initialValues, required, deriveAddress, layout, setFormi pattern: cityPattern, errorMessage: cityError, }, + streetName: { + errorMessage: streetNameError, + }, }), {errorMap} )} @@ -368,6 +384,7 @@ const AddressNLForm = ({initialValues, required, deriveAddress, layout, setFormi const FormikAddress = ({required, setFormioValues, deriveAddress, layout}) => { const {values, isValid, setFieldValue} = useFormikContext(); const {baseUrl} = useContext(ConfigContext); + const [isAddressDisabled, setAddressDisabled] = useState(true); const useColumns = layout === 'doubleColumn'; useEffect(() => { @@ -394,6 +411,12 @@ const FormikAddress = ({required, setFormioValues, deriveAddress, layout}) => { setFieldValue('city', data['city']); setFieldValue('streetName', data['streetName']); setFieldValue('secretStreetCity', data['secretStreetCity']); + + // mark the auto-filled fields as populated and disabled when they have been both + // retrieved from the API and they do have a value + const dataRetrieved = !!(data['city'] && data['streetName']); + setAddressDisabled(dataRetrieved); + setFieldValue('autoPopulated', dataRetrieved); }; return ( @@ -434,7 +457,8 @@ const FormikAddress = ({required, setFormioValues, deriveAddress, layout}) => { defaultMessage="Street name" /> } - disabled + disabled={isAddressDisabled} + isRequired={required} /> { defaultMessage="City" /> } - disabled + disabled={isAddressDisabled} + isRequired={required} /> )}