I have referred to below solution for dividing the street address into 3 lines.
For shipping form in checkout .
I have made changes for billing address below referring the above link.
<?php
namespace Vendor\Module\Model\Checkout;
class LayoutProcessorPlugin
{
public function afterProcess(
\Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
array $jsLayout
) {
$jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
['payment']['children']['afterMethods']['children']['billing-address-form']['children']['form-fields']
['children']['street'] = [
'component' => 'Magento_Ui/js/form/components/group',
'required' => false, //turn false because I removed main label
'dataScope' => 'billing-address-form.street',
'provider' => 'checkoutProvider',
'sortOrder' => 52,
'type' => 'group',
'additionalClasses' => 'street',
'children' => [
[
'label' => __('Flat, House no., Building, Company, Apartment: '),
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'billing-address-form.street',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input'
],
'dataScope' => '0',
'provider' => 'checkoutProvider',
'validation' => ['required-entry' => true, "min_text_length" => 1, "max_text_length" => 255],
],
[
'label' => __('Area, Colony, Street, Sector, Village: '),
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'billing-address-form.street',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input'
],
'dataScope' => '1',
'provider' => 'checkoutProvider',
'validation' => ['required-entry' => true, "min_text_length" => 1, "max_text_length" => 255],
],
[
'label' => __('Landmark e.g. near apollo hospital: '),
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'billing-address-form.street',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input'
],
'dataScope' => '2',
'provider' => 'checkoutProvider',
'validation' => ['required-entry' => true, "min_text_length" => 1, "max_text_length" => 255],
],
]
];
}
return $jsLayout;
}
}
The street field gets divided into three lines with label for each but when saved the fields are not getting saved.
How can I make this working for Billing address in checkout.
Best Answer