:::: MENU ::::
Posts tagged with: country based region selection

Use Country based region selection in admin form Magento 2

In this tutorial we will learn about a default functionality of magento,Use Country based region selection in admin form Magento 2 . This is a built in function of magento. Magento provides this default functionality in the admin panel ui-component.Suppose you want to add country and region fields in your custom module in admin section.Now we know what you want to do, so lets shift our focus to the method and code which will help us to accomplish our task.

Lets have a look at the code part.

Country based region selection magento

Below code will use this default magneto functionality in your admin panel ui component form.

<field name="country_id">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Magento\Directory\Model\Config\Source\Country</item>
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Country</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="source" xsi:type="string">store</item>
            <item name="component" xsi:type="string">Magento_Ui/js/form/element/country</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>
<field name="region">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">State/Region</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">store</item>
            <item name="sortOrder" xsi:type="number">15</item>
            <item name="visible" xsi:type="boolean">false</item>
        </item>
    </argument>
</field>
<field name="region_id">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Magento\Directory\Model\ResourceModel\Region\Collection</item>
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">State/Region</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="source" xsi:type="string">store</item>
            <item name="sortOrder" xsi:type="number">20</item>
            <item name="customEntry" xsi:type="string">region</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            <item name="filterBy" xsi:type="array">
                <item name="target" xsi:type="string">${ $.provider }:${ $.parentScope }.country_id</item>
                <item name="field" xsi:type="string">country_id</item>
            </item>
        </item>
    </argument>
</field>

So you can populate the country field values, and by selecting country you can also get the regions by using above code.

That’s it from this tutorial,i have tried to explain this magento functionality in a simplest and easiest way.Therefore i hope this will help you in a better way.

Since these tutorials are for learning purpose please feel free to drop any suggestions or queries in comments section. That will definitely be highly appreciated.

Author: Qaisar Satti
Category: Magento 2
Last Modified: October 12, 2018