Show Billing Address Form In Checkout First Step In magento 2

Question

Stuck:On when select new address I want to customize checkout page

Need to show billing with shipping i have done most of part but fields are not showing.

I try Like this.

Create a new region in Magento_Checkout/template/shipping.html

<!-- ko foreach: getRegion('shipping-billing') -->
      <!-- ko template: getTemplate() --><!-- /ko -->
<!-- /ko -->  

Add section in checkout_index_index.xml

<item name="shipping-step" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="children" xsi:type="array">
    <item name="shippingAddress" xsi:type="array">
        <item name="children" xsi:type="array">
            <item name="shipping-billing" xsi:type="array">
                <item name="component" xsi:type="string">Custom_Checkout/js/view/shipping-billing-address</item>
                <item name="displayArea" xsi:type="string">shipping-billing</item>
            </item>
        </item>
    </item>
</item>

And in Custom_Checkout/template/shipping-billing-address.html

<div class="checkout-billing-address">

    <div class="billing-address-same-as-shipping-block field choice" data-bind="visible: canUseShippingAddress()">
        <input type="checkbox" name="billing-address-same-as-shipping"
               data-bind="checked: isAddressSameAsShipping, click: useShippingAddress, attr: {id: 'billing-address-same-as-shipping-billing'  }"/>
        <label data-bind="attr: {for: 'billing-address-same-as-shipping-billing'  }"><span
                data-bind="i18n: 'My billing and shipping address are the same'"></span></label>
    </div>

    <!-- ko template: 'Magento_Checkout/billing-address/details' --><!-- /ko -->
    <fieldset class="fieldset" data-bind="visible: !isAddressDetailsVisible()">
        <!-- ko template: 'Magento_Checkout/billing-address/list' --><!-- /ko -->
        <!-- ko template: 'Magento_Checkout/billing-address/form' --><!-- /ko -->
        <div class="actions-toolbar">
            <div class="primary">
                <button class="action action-update" type="button" data-bind="click: updateAddress">
                    <span data-bind="i18n: 'Update'"></span>
                </button>
                <button class="action action-cancel" type="button" data-bind="click: cancelAddressEdit">
                    <span data-bind="i18n: 'Cancel'"></span>
                </button>
            </div>
        </div>
    </fieldset>

</div>

How can i load fields ?

Actually inside this file code Magento_Checkout/billing-address/form

<div class="billing-address-form" data-bind="fadeVisible: isAddressFormVisible">
<!-- ko foreach: getRegion('before-fields') -->
<!-- ko template: getTemplate() --><!-- /ko -->
<!--/ko-->
<form data-hasrequired="* Required Fields">
    <fieldset id="billing-new-address-form" class="fieldset address">
        <!-- ko foreach: getRegion('additional-fieldsets') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <!-- ko if: (isCustomerLoggedIn && customerHasAddresses) -->
        <div class="choice field">
            <input type="checkbox" class="checkbox" id="billing-save-in-address-book" data-bind="checked: saveInAddressBook" />
            <label class="label" for="billing-save-in-address-book">
                <span data-bind="i18n: 'Save in address book'"></span>
            </label>
        </div>
        <!-- /ko -->
    </fieldset>
</form>

Not working code

<!-- ko foreach: getRegion('additional-fieldsets') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->

Answer 1

The layout nodes for actual fields for the address are added the block methodMagento\Checkout\Block\Checkout\LayoutProcessor::process. In order to move these dynamically added layout nodes, you have to write a plugin. This is well explained in the following Magento StackExchange post:

how to reorder (switch) billing address before shipping address