Magento 2.1 ฉันจะสร้างฟิลด์องค์ประกอบของฟอร์มเองได้อย่างไรขึ้นอยู่กับค่าของฟิลด์อื่น?

ฉันมีหนึ่งช่องที่เลือกซึ่งมีตัวเลือกบางอย่าง หนึ่งในนั้นจะมีบางฟิลด์ขึ้นอยู่กับค่าฟิลด์อื่นจะซ่อน ฉันได้คัดลอกและขยาย js องค์ประกอบสำหรับเขตข้อมูลของฉัน แต่มันไม่ทำงานหรือฉันทำผิดวิธี องค์ประกอบ Ui รองรับคุณสมบัตินี้หรือไม่ ฉันจะทำสิ่งนี้สำเร็จได้อย่างไร?

ด้านล่างคือสิ่งที่ฉันได้ทำ:

<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">Field name</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="component" xsi:type="string">Pathto/js/form/element/options</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

<field name="field2Depend1"></field>
<field name="field3Depend1"></field>

jsComponent js/form/element/options:

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

    return select.extend({

        onChange: function () {
            this.enableDisableFields();
        },

        /**
         * Enable/disable fields on Coupons tab
         */
        enableDisableFields: function () {
            // code check field
        }
    });
});

ลองสิ่งนี้ ( หมายเหตุ : อย่าลืมแทนที่บรรทัด "Namespace" และบรรทัด "ModuleName" ด้วยค่าของคุณ):

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

ที่ไหน:

• การมองเห็นองค์ประกอบย่อยถูกกำหนดโดยค่าเริ่มต้นfalseดังนี้
• The visibleValue- เป็นfield1ค่าเมื่อองค์ประกอบควรจะปรากฏ;

namespace \ ModuleName \ รุ่น \ Config \ Source \ ตัวเลือก

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 / รหัส / Namespace / ModuleName / view / adminhtml / เว็บ / js / รูปแบบ / องค์ประกอบ / 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();
        },
    });
});

ผลลัพธ์:

ค่า 0 ที่เลือก:

เลือกค่า 1:

เลือกค่า 2:

เลือกค่า 3:

PS:อาจไม่ใช่ทางออกที่ดีที่สุด แต่มันจะช่วยคุณ

วิธีการแก้ปัญหาที่แนะนำโดย Magentix จะทำให้เกิดข้อผิดพลาดเป็นครั้งคราวเมื่อใช้การเตรียมใช้งาน ขึ้นอยู่กับเวลาที่เบราว์เซอร์ของคุณแสดงผลองค์ประกอบ เพื่อแก้ไขคุณสามารถใช้ setTimeout

ดูรหัสด้านล่าง:

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

    return select.extend({

        /**
         * Extends instance with defaults, extends config with formatted values
         *     and options, and invokes initialize method of AbstractElement class.
         *     If instance's 'customEntry' property is set to true, calls 'initInput'
         */
        initialize: function () {
            this._super();

            this.resetVisibility();

            return this;
        },

        toggleVisibilityOnRender: function (visibility, time) {
            var field = uiRegistry.get('index = field_to_toggle');
            if(field !== undefined) {
                if(visibility == 1) {
                    field.show();
                } else {
                    field.hide();
                }

                return;
            }
            else {
                var self = this;
                setTimeout(function() {
                    self.toggleVisibilityOnRender(visibility, time);
                }, time);
            }
        },

        /**
         * On value change handler.
         *
         * @param {String} value
         */
        onUpdate: function (value) {
            if (value == 1) {
                this.showField();
            } else {
                this.hideField();
            }
            return this._super();
        },

        resetVisibility: function () {
            if (this.value() == 1) {
                this.showField();
            } else {
                this.hideField();
            }
        },

        showField: function () {
            this.toggleVisibilityOnRender(1, 1000);

        },

        hideField: function () {
            this.toggleVisibilityOnRender(0, 1000);
        }
    });
});

นี่เป็นคำถามเก่าที่มีหลายคำตอบที่ใช้งานได้ แต่ฉันได้ค้นพบวิธีแก้ปัญหาโดยใช้สิ่งที่ Magento จัดให้ (ณ วันที่ 2.1.0) โดยไม่จำเป็นต้องขยายองค์ประกอบ เนื่องจากมีการทำเครื่องหมายคำถามหลายคำถามว่าซ้ำกันและมุ่งตรงไปที่นี่ฉันคิดว่ามันจะเป็นประโยชน์ในการให้ข้อมูลบางอย่างเกี่ยวกับตัวเลือกนี้

องค์ประกอบแบบฟอร์มองค์ประกอบ UI ทั้งหมดที่ขยายMagento_Ui/js/form/element/abstract.jsมีการswitcherConfigตั้งค่าสำหรับวัตถุประสงค์เช่นการซ่อน / แสดงองค์ประกอบเช่นเดียวกับการกระทำอื่น ๆ switcherองค์ประกอบที่สามารถพบได้ที่Magento_Ui / js / รูปแบบ / สลับสำหรับอยากรู้อยากเห็น คุณสามารถหาตัวอย่างของมันถูกนำมาใช้ในsales_rule_form.xmlและcatalog_rule_form.xml แน่นอนว่าหากคุณใช้องค์ประกอบที่กำหนดเองของคุณเองคุณสามารถใช้สิ่งนี้ได้ตราบใดที่องค์ประกอบของคุณขยายไปในที่สุดabstractซึ่งดูเหมือนจะเป็นกรณีตามรหัสตัวอย่างที่ให้ไว้ในคำถาม

ตอนนี้เป็นตัวอย่างที่เฉพาะเจาะจงมากขึ้นเพื่อตอบคำถามเดิม

ในNamespace/ModuleName/view/adminhtml/ui_component/your_entity_form.xmlคุณเพียงแค่ต้องเพิ่มสิ่งต่อไปนี้ลงในฟิลด์settingsที่ควบคุม (เช่นฟิลด์ที่กำหนดว่าจะซ่อนหรือซ่อนฟิลด์ใด) field1ในตัวอย่างของเรื่องนี้จะเป็น

<field name="field1">
    <argument name="data" xsi:type="array">
        ...
    </argument>
    <settings>
        <switcherConfig>
            <rules>
                <rule name="0">
                    <value>2</value>
                    <actions>
                        <action name="0">
                            <target>your_entity_form.your_entity_form.entity_information.field2Depend1</target>
                            <callback>show</callback>
                        </action>
                        <action name="1">
                            <target>your_entity_form.your_entity_form.entity_information.field3Depend1</target>
                            <callback>hide</callback>
                        </action>
                    </actions>
                </rule>
                <rule name="1">
                    <value>3</value>
                    <actions>
                        <action name="0">
                            <target>your_entity_form.your_entity_form.entity_information.field2Depend1</target>
                            <callback>hide</callback>
                        </action>
                        <action name="1">
                            <target>your_entity_form.your_entity_form.entity_information.field3Depend1</target>
                            <callback>show</callback>
                        </action>
                    </actions>
                </rule>
            </rules>
            <enabled>true</enabled>
        </switcherConfig>
    </settings>
</field>

มาทำลายมันกันหน่อย switcherองค์ประกอบมีอาร์เรย์ของrulesซึ่งเป็นสิ่งที่เรากำลังสร้างออกจากที่นี่ แต่ละคน<rule>มีชื่อซึ่งเป็นตัวเลขในตัวอย่างนี้ ชื่อนี้เป็นคีย์อาร์เรย์ / ดัชนีสำหรับรายการนี้ เรากำลังใช้ตัวเลขเป็นดัชนีอาเรย์ เงื่อนไขควรทำงานด้วย แต่ฉันไม่ได้ทดสอบทฤษฎีนี้ ปรับปรุง - ตามที่ระบุไว้โดย @ChristopheFerreboeuf ในความคิดเห็นสตริงที่จะไม่ทำงานที่นี่ นี่คืออาร์เรย์และควรเริ่มต้นด้วย0ไม่ใช่สตริงหรือ 1

ภายในruleเราแต่ละคนผ่านสองข้อโต้แย้ง

1. value- นี่คือค่าfield1ที่ควรจะทำให้เกิดการactionsกำหนดไว้ด้านล่าง
2. actions- ที่นี่เรามีอาร์เรย์อีกชุด สิ่งเหล่านี้เป็นการกระทำที่จะถูกเรียกเมื่อตรงตามเงื่อนไขของกฎนี้ อีกครั้งactionชื่อของแต่ละคนเป็นเพียงดัชนี / คีย์อาร์เรย์ของรายการนั้น

ตอนนี้แต่ละคนactionมีสองข้อโต้แย้งเช่นกัน (ที่มีตัวเลือกที่ 3)

1. target- นี่คือองค์ประกอบที่คุณต้องการจัดการภายใต้การกระทำนี้ หากคุณไม่คุ้นเคยกับการจัดองค์ประกอบชื่อ ui_component ใน Magento คุณสามารถตรวจสอบบทความของ Alan Stormได้ มันเป็นอะไรบางอย่าง{component_name}.{component_name}.{fieldset_name}.{field_name}ในตัวอย่างนี้
2. callback- targetนี่คือการกระทำที่จะต้องดำเนินการเมื่อวันที่ดังกล่าวข้างต้น การเรียกกลับนี้ควรเป็นฟังก์ชันที่มีอยู่ในองค์ประกอบเป้าหมาย ใช้ตัวอย่างของเราและhide showที่นี่คุณสามารถเริ่มขยายการทำงานที่มีอยู่ catalog_rule_form.xmlตัวอย่างที่ผมกล่าวถึงการใช้งานก่อนหน้านี้setValidationหากคุณต้องการดูตัวอย่างที่แตกต่างกัน
3. นอกจากนี้คุณยังสามารถเพิ่ม<params>ไปยังสิ่งactionที่เรียกร้องให้พวกเขา คุณสามารถเห็นสิ่งนี้ในcatalog_rule_form.xmlตัวอย่างได้เช่นกัน

สุดท้ายภายในรายการสุดท้ายคือswitcherConfig <enabled>true</enabled>สิ่งนี้ควรจะตรงไปตรงมามันเป็นบูลีนเพื่อเปิด / ปิดการใช้งานฟังก์ชั่นสลับที่เราเพิ่งใช้

และเราทำเสร็จแล้ว ดังนั้นการใช้ตัวอย่างข้างต้นสิ่งที่คุณควรจะเห็นเป็นฟิลด์field2Depend1ปรากฏขึ้นหากคุณเลือกตัวเลือกที่มีมูลค่า2ในfield1และปรากฏขึ้นหากคุณเลือกตัวเลือกที่มีมูลค่า field3Depend13

ฉันได้ทดสอบตัวอย่างนี้โดยใช้เฉพาะhideและshowในฟิลด์ที่จำเป็นและดูเหมือนว่าจะมองเห็นการตรวจสอบบัญชี กล่าวอีกนัยหนึ่งถ้าfield2Depend1จำเป็นต้องใช้มันจะถูกต้องก็ต่อเมื่อมองเห็นได้ ไม่จำเป็นต้องมีการกำหนดค่าเพิ่มเติมสำหรับการทำงาน

หวังว่านี่จะช่วยคุณได้สำหรับทุกคนที่กำลังมองหาวิธีแก้ปัญหาแบบใหม่ ๆ

มีคำตอบมากมายสำหรับคำถามนี้ แต่ส่วนใหญ่จะตั้งสมมติฐานว่า uiRegistry เต็มแล้วหรือใช้setTimeoutเพื่อล้าง call stack และรอ event ถัดไป (ซึ่งในความคิดของฉันยังคงเป็นวิธีที่ผิด ทำ - เนื่องจากคุณไม่สามารถแน่ใจได้ว่าส่วนประกอบ UI อื่นโหลด - แก้ไขฉันถ้าฉันผิด)

ประการแรกแน่นอนเพิ่มองค์ประกอบ JS ที่กำหนดเองของคุณในการกำหนดค่าฟิลด์ (ดูคำตอบอื่น ๆ สำหรับรายละเอียด):

<item name="component" xsi:type="string">Namespace_ModuleName/js/form/element/options</item>

จากนั้นนี่คือองค์ประกอบ UI ที่กำหนดเองที่ซ่อนหรือแสดงฟิลด์ที่ต้องพึ่งพา - พร้อมความคิดเห็นเพื่ออธิบายสิ่งที่เกิดขึ้น

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

    'use strict';

    return select.extend({

        /**
         * Array of field names that depend on the value of 
         * this UI component.
         */
        dependentFieldNames: [
            'my_field_name1',
            'my_field_name2'
        ],

        /**
         * Reference storage for dependent fields. We're caching this
         * because we don't want to query the UI registry so often.
         */
        dependentFields : [],

        /**
         * Initialize field component, and store a reference to the dependent fields.
         */
        initialize: function() {
            this._super();

            // We're creating a promise that resolves when we're sure that all our dependent
            // UI components have been loaded. We're also binding our callback because
            // we're making use of `this`
            uiRegistry.promise(this.dependentFieldNames).done(_.bind(function() {

                // Let's store the arguments (the UI Components we queried for) in our object
                this.dependentFields = arguments;

                // Set the initial visibility of our fields.
                this.processDependentFieldVisibility(parseInt(this.initialValue));
            }, this));
        },

        /**
         * On value change handler.
         *
         * @param {String} value
         */
        onUpdate: function (value) {
            // We're calling parseInt, because in JS "0" evaluates to True
            this.processDependentFieldVisibility(parseInt(value));
            return this._super();
        },

        /**
         * Shows or hides dependent fields.
         *
         * @param visibility
         */
        processDependentFieldVisibility: function (visibility) {
            var method = 'hide';
            if (visibility) {
                method = 'show';
            }

            // Underscore's invoke, calls the passed method on all the objects in our array
            _.invoke(this.dependentFields, method);
        }
    });
});

หากคุณมีข้อผิดพลาดเช่นField is Undefinedเมื่อเริ่มต้นการมองเห็นฟิลด์ใช้setTimeout()เพื่อโหลดฟิลด์ที่ขึ้นอยู่กับ:

fieldDepend: function (value) {
     setTimeout(function(){ 
        var field1 = uiRegistry.get('index = field2');

        if (field1.visibleValue == value) {
               field1.show();
        } else {
               field1.hide();
        }

       var field2 = uiRegistry.get('index = field3');

        if (field2.visibleValue == value) {
              field2.show();
        } else {
              field2.hide();
        }    
     }, 1);
     return this._super();
},

องค์ประกอบที่กำหนดเองกับ init:

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

    return select.extend({

        /**
         * Init
         */
        initialize: function () {
            this._super();

            this.fieldDepend(this.value());

            return this;
        },

        /**
         * On value change handler.
         *
         * @param {String} value
         */
        onUpdate: function (value) {
            this.fieldDepend(value);

            return this._super();
        },

        /**
         * Update field dependency
         *
         * @param {String} value
         */
        fieldDepend: function (value) {
            var field = uiRegistry.get('index = field_to_toggle');

            if (value == 'xxxxx') {
                field.show();
            } else {
                field.hide();
            }

            return this;
        }
    });
});

มีสองสามวิธีในการจัดการการพึ่งพาเขตข้อมูลสำหรับการตกลงใช่ / ไม่ใช่แบบง่ายกล่องกาเครื่องหมายหรือตัวสลับคุณสามารถใช้importsหรือexportsเชื่อมโยงคุณสมบัติใน Magento 2 การแก้ปัญหาจะกล่าวถึงในรายละเอียดที่นี่: ฟิลด์พึ่งพาในรูปแบบองค์ประกอบ UI ใน Magento 2 ที่ไม่มี Javascript สำหรับฟิลด์บูลีน :

<!-- In the parent field <settings>...</settings> -->
<exports>
    <link name="checked">${$.parentName}.description:disabled</link>
</exports>

<!-- or -->

<!-- In the dependent field <settings>...</settings> -->
<imports>
    <link name="disabled">${$.parentName}.is_active:checked</link>
</imports>

เพื่อจัดการกับชนิดอื่น ๆ switcherConfigของค่าเช่นการพึ่งพารายการของค่าในแบบเลื่อนลงหรือแม้จะไม่น่าเป็นค่าของช่องใส่คุณสามารถใช้ ตรวจสอบฟิลด์ที่พึ่งพาได้ในรูปแบบ ui-component ใน Magento 2 โดยไม่มี Javascriptสำหรับข้อมูล

<switcherConfig>
    <rules>
        <rule name="0">
            <value>list</value><!-- Actions defined will be trigger when the current selected field value matches the value defined here-->
            <actions>
                <action name="0">
                    <target>hs_xml_dependentfield_model_form.hs_xml_dependentfield_model_form.general.list</target>
                    <callback>visible</callback>
                    <params>
                        <param name="0" xsi:type="boolean">true</param>
                    </params>
                </action>
                <action name="1">
                    <target>hs_xml_dependentfield_model_form.hs_xml_dependentfield_model_form.general.hex_code</target>
                    <callback>visible</callback>
                    <params>
                        <param name="0" xsi:type="boolean">true</param>
                    </params>
                </action>
            </actions>
        </rule>
        ...
    </rules>
    <enabled>true</enabled>
</switcherConfig>

กฎ 2 ข้อข้างต้นจัดการทุกอย่างได้โดยใช้การกำหนดค่า XML สำหรับกฎที่ซับซ้อนมากขึ้นคุณสามารถใช้ JavaScript ได้เช่นกัน

ข้อมูลในรูปแบบองค์ประกอบ UI แต่ละคนเป็นส่วนประกอบซึ่งสามารถขยายการใช้ที่แอตทริบิวต์สำหรับcomponent <field component="path to your js" ...>...</field>จากนั้นคุณสามารถใช้ฟิลด์data.configเพื่อส่งผ่านข้อมูลเพิ่มเติมไปยังส่วนประกอบในกรณีที่ส่วนประกอบนั้นเป็นแบบทั่วไปและถูกใช้ซ้ำในหลาย ๆ สถานที่รวมกับคุณสมบัติimportsหรือการexportsเชื่อมโยงเพื่อส่งผ่านค่าไปยังสิ่งที่สังเกตได้หรือวิธีการ

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับคุณสมบัติการเชื่อมโยงคุณสามารถตรวจสอบคุณสมบัติการเชื่อมโยงของส่วนประกอบ UI

ในกรณีที่มีคนต่อสู้กับวิธีErfanคุณต้องผ่านเส้นทางเต็มไปยังเขตข้อมูลในdependentFieldNamesเช่น:

       dependentFieldNames: [
        'form_name.form_name.fieldset.field_name',
        'form_name.form_name.fieldset.field_name1',
        'form_name.form_name.fieldset.field_name2',
        'form_name.form_name.fieldset.field_name3'
    ],

ฉันไม่แน่ใจว่าทำไม form_name ถึงต้องเป็น 2 เท่า แต่สิ่งนี้ได้ผลสำหรับฉัน

เพื่อแก้ปัญหานี้ฉันใส่console.log(query);ในstatic/adminhtml/Magento/backend/en_US/Magento_Ui/js/lib/registry/registry.jsบรรทัดที่ 223 (ฟังก์ชั่น get () ก่อนหน้านี้this._addRequest(query, callback))