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.
<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.
Qaisar Satti
Hi, I'm Qaisar Satti! I've been a developer for over 20 years, and now I love sharing what I've learned through tutorials and guides. Whether you're working with Magento, PrestaShop, or WooCommerce, my goal is to make your development journey a bit easier and more fun. When I'm not coding or writing, you can find me exploring new tech trends and hanging out with the amazing developer community. Thanks for stopping by, and happy coding!
