Magento – ui_component form state/region field update after country select (M 2.1)

country-regionsgridmagento-2.1uicomponent

I created form as a ui_component in my module. It has all data which is neccesary -> country list and region/state list.

The only problem is the region field doesn`t update on country change. It always display dropdown with all provided states. So if I choose United States as a "country" it should display only US states in region/state field but it always displays all.

XML with form:

<?xml version="1.0" encoding="UTF-8"?>

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">testModule_localstores_localstore_form.localstore_form_data_source</item>
            <item name="deps" xsi:type="string">testModule_localstores_localstore_form.localstore_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">General Information</item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">testModule_localstores_localstore_form</item>
        </item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
        <item name="buttons" xsi:type="array">
            <item name="back" xsi:type="string">testModule\LocalStores\Block\Adminhtml\LocalStore\Edit\BackButton</item>
            <item name="delete" xsi:type="string">testModule\LocalStores\Block\Adminhtml\LocalStore\Edit\DeleteButton</item>
            <item name="reset" xsi:type="string">testModule\LocalStores\Block\Adminhtml\LocalStore\Edit\ResetButton</item>
            <item name="save" xsi:type="string">testModule\LocalStores\Block\Adminhtml\LocalStore\Edit\SaveButton</item>
            <item name="save_and_continue" xsi:type="string">testModule\LocalStores\Block\Adminhtml\LocalStore\Edit\SaveAndContinueButton</item>
        </item>
    </argument>
    <dataSource name="localstore_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">testModule\LocalStores\Model\LocalStore\DataProvider</argument>
            <argument name="name" xsi:type="string">localstore_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">localstore_id</argument>
            <argument name="requestFieldName" xsi:type="string">localstore_id</argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="submit_url" xsi:type="url" path="testModule_localstores/localstore/save"/>
                </item>
            </argument>
        </argument>
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
            </item>
        </argument>
    </dataSource>
    <fieldset name="localstore">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string"/>
            </item>
        </argument>
        <field name="localstore_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">false</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">localstore</item>
                    <item name="dataScope" xsi:type="string">localstore_id</item>
                </item>
            </argument>
        </field>
        <field name="name">
            <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">Name</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">localstore</item>
                    <item name="sortOrder" xsi:type="number">20</item>
                    <item name="dataScope" xsi:type="string">name</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="address">
            <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">Address</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">localstore</item>
                    <item name="sortOrder" xsi:type="number">30</item>
                    <item name="dataScope" xsi:type="string">address</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="city">
            <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">City</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">localstore</item>
                    <item name="sortOrder" xsi:type="number">40</item>
                    <item name="dataScope" xsi:type="string">city</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="zip">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">zip</item>
                    <item name="label" xsi:type="string" translate="true">Zip</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">localstore</item>
                    <item name="sortOrder" xsi:type="number">50</item>
                    <item name="dataScope" xsi:type="string">zip</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="country">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Country</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                    <item name="sortOrder" xsi:type="number">60</item>
                    <item name="dataScope" xsi:type="string">country</item>
                </item>
                <item name="options" xsi:type="object">Magento\Directory\Model\Config\Source\Country</item>
            </argument>
        </field>
        <field name="region_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Region Id</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="source" xsi:type="string">localstore</item>
                    <item name="sortOrder" xsi:type="number">70</item>
                    <item name="dataScope" xsi:type="string">region_id</item>
                </item>
                <item name="options" xsi:type="object">Magento\Directory\Model\ResourceModel\Region\Collection</item>
            </argument>
            <argument name="default_filter" xsi:type="array">
                <item name="country" xsi:type="string"></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">Region</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">localstore</item>
                    <item name="sortOrder" xsi:type="number">80</item>
                    <item name="dataScope" xsi:type="string">region</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

Formatted version: http://pastebin.com/fB4045zt

Best Answer

Tested working code with country/region fields dependency:

<fieldset name="address">
...
<field name="country_id">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">Magento\Directory\Model\ResourceModel\Country\Collection</item>
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Country</item>
                <item name="formElement" xsi:type="string">select</item>
                <item name="sortOrder" xsi:type="number">100</item>
                <item name="source" xsi:type="string">address</item><!-- fieldset name -->
                <item name="dataScope" xsi:type="string">country</item><!-- 'country' - db table column name where country code is saved --> 
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </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="label" xsi:type="string" translate="true">State/Province</item>
                <item name="formElement" xsi:type="string">select</item>
                <item name="sortOrder" xsi:type="number">110</item>
                <item name="source" xsi:type="string">address</item><!-- fieldset name -->
                <item name="customEntry" xsi:type="string">state_province</item><!-- 'state_province' - db table column name where region name is saved -->
                <item name="dataScope" xsi:type="string">state_province_id</item><!-- 'state_province_id' - db table column name where region id is saved -->
                <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</item><!-- 'country' - db table column name where country code is saved -->
                    <item name="field" xsi:type="string">country_id</item><!-- country_id field name -->
                </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/Province</item>
                <item name="formElement" xsi:type="string">input</item>
                <item name="sortOrder" xsi:type="number">115</item>
                <item name="source" xsi:type="string">address</item><!-- fieldset name -->
                <item name="customEntry" xsi:type="string">state_province</item><!-- 'state_province' - db table column name where region name is saved -->
                <item name="dataScope" xsi:type="string">state_province</item><!-- 'state_province' - db table column name where region name is saved -->
                <item name="visible" xsi:type="boolean">false</item>
            </item>
        </argument>
    </field>
...
</fieldset>
Related Topic