diff --git a/src/formio/components/AddressNL.js b/src/formio/components/AddressNL.js index a15e27c88..09345611d 100644 --- a/src/formio/components/AddressNL.js +++ b/src/formio/components/AddressNL.js @@ -201,7 +201,14 @@ const FIELD_LABELS = defineMessages({ }, }); -const addressNLSchema = (required, intl) => { +const addressNLSchema = ( + required, + intl, + postCodePattern, + postCodeError, + cityPattern, + cityError +) => { let postcodeSchema = z.string().regex(/^[1-9][0-9]{3} ?(?!sa|sd|ss|SA|SD|SS)[a-zA-Z]{2}$/, { message: intl.formatMessage({ description: @@ -209,6 +216,13 @@ const addressNLSchema = (required, intl) => { defaultMessage: 'Postcode must be four digits followed by two letters (e.g. 1234 AB).', }), }); + if (postCodePattern && postCodeError) + postcodeSchema = postcodeSchema.regex(new RegExp(postCodePattern), {message: postCodeError}); + + let citySchema = z.string(); + if (cityPattern && cityError) + citySchema = citySchema.regex(new RegExp(cityPattern), {message: cityError}); + let houseNumberSchema = z.string().regex(/^\d{1,5}$/, { message: intl.formatMessage({ description: @@ -224,6 +238,7 @@ const addressNLSchema = (required, intl) => { return z .object({ postcode: postcodeSchema, + city: citySchema.optional(), houseNumber: houseNumberSchema, houseLetter: z .string() @@ -278,6 +293,14 @@ const addressNLSchema = (required, intl) => { const AddressNLForm = ({initialValues, required, deriveAddress, layout, setFormioValues}) => { const intl = useIntl(); + const {component} = useContext(ConfigContext); + const postCodeComponent = component.openForms.components?.postcode; + const cityComponent = component.openForms.components?.city; + const postCodePattern = postCodeComponent?.validate?.pattern; + const postCodeError = postCodeComponent?.translatedErrors[intl.locale].pattern; + const cityPattern = cityComponent?.validate?.pattern; + const cityError = cityComponent?.translatedErrors[intl.locale].pattern; + const errorMap = (issue, ctx) => { switch (issue.code) { case z.ZodIssueCode.invalid_type: { @@ -311,7 +334,10 @@ const AddressNLForm = ({initialValues, required, deriveAddress, layout, setFormi postcode: true, houseNumber: true, }} - validationSchema={toFormikValidationSchema(addressNLSchema(required, intl), {errorMap})} + validationSchema={toFormikValidationSchema( + addressNLSchema(required, intl, postCodePattern, postCodeError, cityPattern, cityError), + {errorMap} + )} > { defaultMessage="City" /> } - validate={validateCity} alwaysShowErrors={true} disabled /> @@ -446,18 +471,6 @@ const PostCodeField = ({required, autoFillAddress}) => { autoFillAddress(); }; - const validate = data => { - const postcodePattern = new RegExp(component.openForms.components?.postcode?.validate?.pattern); - - if (!postcodePattern) return; - - let error; - if (!postcodePattern.test(data)) { - error = component.openForms.components.postcode.translatedErrors[intl.locale].pattern; - } - return error; - }; - return ( { placeholder="1234 AB" isRequired={required} onBlur={onBlur} - validate={validate} /> ); };