2

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

2

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>
0

You can see an example here:

vendor/magento/module-checkout/view/frontend/layout/checkout_cart_index.xml

<item name="region_id" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/region</item>
    <item name="sortOrder" xsi:type="string">112</item>
    <item name="config" xsi:type="array">
        <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">shippingAddress.region</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>

You should add the default filter to the region id field.

0

Working example of country / region fields with region properly filtering based on country selection.

OP: Anthony Charrex Issue with country and region field in custom module using ui-component

<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>
  • What is the use of <item name="component" xsi:type="string">Magento_Ui/js/form/element/country</item> – AbdulBasit Oct 26 '17 at 11:25
  • I want to use custom tables to populate in my custom form. I followed the same pattern as country and region but it is not working – AbdulBasit Oct 26 '17 at 13:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.