AddressForm container
The AddressForm
container is a standalone component designed for creating and editing customer addresses. This container enables merchants to build a custom user experience around address management while leveraging a pre-built form that minimizes development effort. The form integrates seamlessly with the Adobe Commerce backend environment, providing flexible configuration of address attributes, validation, labels, attribute sorting, and more.
The Addresses
container also uses this container.
The following image illustrates a sample AddressForm container:
Configurations
The AddressForm
container provides the following configuration options:
Examples
HTMLInputElement usage sample:
const formRef = { current: null };
provider.render(AddressForm, { forwardFormRef: formRef,})(containerWrapper);
const isFormValid = formRef.current.handleValidationSubmit();const formData = inputRef.current.formData;
return { handleValidationSubmit, formData: normalizeGetAddressData(modifyFormRef, true), isDataValid, };
isDataValid
is a boolean value that indicates whether the form has been validated without an explicit submit action.
inputsDefaultValueSet sample payload:
inputsDefaultValueSet: { city: 'City', company: '', countryCode: 'AR', region: { regionCode: 'AR-H', regionId: 1579, }, telephone: '123456789', vatId: '999', postcode: '12345', street: 'Street One', streetMultiline_2: 'Street Two',}
Example
The following example renders the AddressForm
container with custom configurations:
provider.render(AddressForm, { addressesFormTitle: 'Address form title', addressId: '', isOpen: true, shippingCheckBoxValue: true, billingCheckBoxValue: true, showShippingCheckBox: true, showBillingCheckBox: true, onChange: (values, inputValue) => { console.log('allValues', values); console.log('inputValue', inputValue); }, onSuccess: () => { console.log('onSuccess'); }, onError: () => { console.log('onError'); },})(containerWrapper);