Hello tvgarden
Please find below solution
<field name="field1">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">Namespace\ModuleName\Model\Config\Source\Options</item>
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Parent Option</item>
<item name="component" xsi:type="string">Namespace_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">field1</item>
<item name="sortOrder" xsi:type="number">210</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="field2Depend1">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Field 1</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">item</item>
<item name="sortOrder" xsi:type="number">220</item>
<item name="breakLine" xsi:type="boolean">true</item>
<item name="visibleValue" xsi:type="string">2</item>
<item name="visible" xsi:type="boolean">false</item>
</item>
</argument>
</field>
<field name="field3Depend1">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Field 2</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">item</item>
<item name="sortOrder" xsi:type="number">230</item>
<item name="breakLine" xsi:type="boolean">true</item>
<item name="visibleValue" xsi:type="string">0</item>
<item name="visible" xsi:type="boolean">false</item>
</item>
</argument>
</field>- The child elements visibility is set by default as false;
- The visibleValue - is field1 value when element should be visible;
Namespace\ModuleName\Model\Config\Source\Options
namespace Namespace\ModuleName\Model\Config\Source;
use Magento\Framework\Option\ArrayInterface;
class Options implements ArrayInterface
{
/**
* @return array
*/
public function toOptionArray()
{
$options = [
0 => [
'label' => 'Please select',
'value' => 0
],
1 => [
'label' => 'Option 1',
'value' => 1
],
2 => [
'label' => 'Option 2',
'value' => 2
],
3 => [
'label' => 'Option 3',
'value' => 3
],
];
return $options;
}
}app/code/Namespace/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('Selected Value: ' + value);
var field1 = uiRegistry.get('index = field2Depend1');
if (field1.visibleValue == value) {
field1.show();
} else {
field1.hide();
}
var field2 = uiRegistry.get('index = field3Depend1');
if (field2.visibleValue == value) {
field2.show();
} else {
field2.hide();
}
return this._super();
},
});
});Kindly find below link of original answer
Url: https://magento.stackexchange.com/questions/132020/magento-2-1-how-do-i-create-form-component-field-...
Hope it will help you to solve this problem then please accept as solution
