Add Country field in custom Checkout form in Magento2

Question

I added new step on checkout and I created a form for this new step. How can I add Magento built-in Country drop down field and state/province drop down field to my custom checkout form?

Answer 1

 <item name="country_id" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/select</item>
    <item name="config" xsi:type="array">
        <item name="customScope" xsi:type="string">customCheckoutForm</item>
        <item name="template" xsi:type="string">ui/form/field</item>
        <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
        <item name="deps" xsi:type="array">
            <item name="0" xsi:type="string">checkoutProvider</item>
        </item>
    </item>
    <item name="dataScope" xsi:type="string">customCheckoutForm.country_id</item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="sortOrder" xsi:type="string">5</item>
    <item name="label" xsi:type="string" translate="true">Country</item>
    <item name="imports" xsi:type="array">
        <item name="initialOptions" xsi:type="string"><![CDATA[index = checkoutProvider:dictionaries.country_id]]></item>
        <item name="setOptions" xsi:type="string"><![CDATA[index = checkoutProvider:dictionaries.country_id]]></item>
    </item>
</item>
<!-- The following items override configuration of corresponding address attributes -->
<item name="region" xsi:type="array">
    <!-- Make region attribute invisible on frontend. Corresponding input element is created by region_id field -->
    <item name="visible" xsi:type="boolean">false</item>
</item>
<item name="region_id" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/region</item>
    <item name="config" xsi:type="array">
        <item name="customScope" xsi:type="string">customCheckoutForm</item>
        <item name="template" xsi:type="string">ui/form/field</item>
        <item name="elementTmpl" xsi:type="string">ui/form/element/select</item>
        <item name="customEntry" xsi:type="string">customCheckoutForm.region</item>
        <item name="deps" xsi:type="array">
            <item name="0" xsi:type="string">checkoutProvider</item>
        </item>
    </item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="dataScope" xsi:type="string">customCheckoutForm.region_id</item>
    <item name="label" xsi:type="string">State/Province</item>
    <item name="sortOrder" xsi:type="string">6</item>
    <item name="validation" xsi:type="array">
        <item name="required-entry" xsi:type="boolean">true</item>
    </item>
    <!-- Value of region_id field is filtered by the value of county_id attribute -->
    <item name="filterBy" xsi:type="array">
        <item name="target" xsi:type="string"><![CDATA[${ $.provider }:${ $.parentScope }.country_id]]></item>
        <item name="field" xsi:type="string">country_id</item>
    </item>
    <item name="imports" xsi:type="array">
        <item name="initialOptions" xsi:type="string"><![CDATA[index = checkoutProvider:dictionaries.region_id]]></item>
        <item name="setOptions" xsi:type="string"><![CDATA[index = checkoutProvider:dictionaries.region_id]]></item>
    </item>
</item>

Answer 2

insert into directory_country_region (country_id, code, default_name) values ("BD", "BD", "Dhaka");
insert into directory_country_region (country_id, code, default_name) values ("BD", "BD", "Bagerhat");
insert into directory_country_region (country_id, code, default_name) values ("BD", "BD", "Bandarban");