Magento 2 : Set dependency between two dropdown in ui form

Question

I want to set dependency in UI form.

For ex : When I select first drop-down value then only display second drop-down.

How to do this ?

Answer 1

You should have two dropdown in ui form like this :

<field name="dropdown1">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">VendorName\ModuleName\Model\Config\Source\Options</item>
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Dropdown 1</item>
            <item name="component" xsi:type="string">VendorName_ModuleName/js/form/element/options</item>
            <item name="visible" xsi:type="boolean">true</item>
            <item name="dataType" xsi:type="string">number</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="source" xsi:type="string">item</item>
            <item name="dataScope" xsi:type="string">dropdown1</item>
            <item name="sortOrder" xsi:type="number">100</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

<field name="dropdown2">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Dropdown 2</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="source" xsi:type="string">item</item>
            <item name="sortOrder" xsi:type="number">110</item>
            <item name="breakLine" xsi:type="boolean">true</item>
            <item name="visibleValue" xsi:type="string">DE</item>
            <item name="visible" xsi:type="boolean">false</item>

        </item>
    </argument>
</field>

Above code, Which is parent dropdown, that's only visible value true. Child dropdown's value should be false.

Now, create your options file :

VendorName\ModuleName\Model\Config\Source\Options

namespace VendorName\ModuleName\Model\Config\Source;

use Magento\Framework\Option\ArrayInterface;

class Options implements ArrayInterface
{
    /**
     * @return array
     */
    public function toOptionArray()
    {
        $options = [
            0 => [
                'label' => 'India',
                'value' => 'IN'
            ],
            1 => [
                'label' => 'Germany',
                'value' => 'DE'
            ],
        ];

        return $options;
    }
}

Now, create js for dependency :

app/code/VendorName/ModuleName/view/adminhtml/web/js/form/element/options.js

define([
    'underscore',
    'uiRegistry',
    'Magento_Ui/js/form/element/select',
    'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
    'use strict';

    return select.extend({

        /**
         * On value change handler.
         *
         * @param {String} value
         */
        onUpdate: function (value) {
            console.log(value); // For display selected value

            var field1 = uiRegistry.get('index = dropdown2');
            if (field1.visibleValue == value) {
                field1.show();
            } else {
                field1.hide();
            }
            return this._super();
        },
    });
});

Cheers :)