Ini adalah pertanyaan lama dengan beberapa jawaban yang berfungsi, namun saya telah menemukan solusi menggunakan apa yang Magento sediakan (pada 2.1.0) tanpa perlu memperluas komponen. Karena beberapa pertanyaan telah ditandai sebagai rangkap dan diarahkan di sini saya pikir akan bermanfaat untuk memberikan beberapa informasi tentang opsi ini.
Semua komponen elemen bentuk ui yang memperluas Magento_Ui/js/form/element/abstract.js
memiliki switcherConfig
pengaturan yang tersedia untuk tujuan seperti menyembunyikan / menunjukkan elemen serta tindakan lainnya. The switcher
komponen dapat ditemukan di Magento_Ui / js / form / switcher untuk penasaran. Anda dapat menemukan contoh penggunaannya di sales_rule_form.xml dan catalog_rule_form.xml . Tentu saja jika Anda sudah menggunakan komponen kustom Anda sendiri, Anda masih dapat menggunakan ini selama komponen Anda pada akhirnya meluas abstract
yang tampaknya merupakan kasus berdasarkan pada contoh kode yang disediakan dalam pertanyaan.
Sekarang untuk contoh yang lebih spesifik untuk menjawab pertanyaan awal.
Dalam Namespace/ModuleName/view/adminhtml/ui_component/your_entity_form.xml
Anda hanya perlu menambahkan berikut ke bidang settings
yang melakukan pengontrolan (yaitu bidang yang menentukan bidang mana yang tersembunyi / terlihat). Dalam contoh Anda ini akan menjadi 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>
Mari kita jabarkan sedikit. The switcher
komponen berisi array rules
yang adalah apa yang kita membangun di sini. Masing-masing <rule>
memiliki nama yang merupakan angka dalam contoh ini. Nama ini adalah kunci larik / indeks untuk item ini. Kami menggunakan angka sebagai indeks array. String harus bekerja juga, tetapi saya belum menguji teori ini .
PEMBARUAN - Seperti yang disebutkan oleh @ChristopheFerreboeuf dalam komentar, string untuk tidak berfungsi di sini. Ini adalah array dan harus dimulai dengan 0
, bukan string atau 1.
Di dalam masing-masing rule
kita melewati dua argumen.
value
- Ini adalah nilai field1
yang harus memicu yang actions
ditentukan di bawah ini.
actions
- Di sini kita memiliki array lain. Ini adalah tindakan yang akan dipicu ketika kondisi aturan ini dipenuhi. Sekali lagi, action
nama masing - masing hanyalah indeks array / kunci dari item itu.
Sekarang masing-masing action
memiliki dua argumen juga (dengan ke-3 opsional).
target
- Ini adalah elemen yang ingin Anda manipulasi di bawah tindakan ini. Jika Anda tidak terbiasa dengan bagaimana nama elemen ui_component disusun di Magento, Anda dapat memeriksa artikel Alan Storm . Ini pada dasarnya seperti {component_name}.{component_name}.{fieldset_name}.{field_name}
dalam contoh ini.
callback
- Berikut adalah tindakan yang harus diambil pada yang disebutkan di atas target
. Panggilan balik ini harus berupa fungsi yang tersedia pada elemen yang ditargetkan. Contoh kami menggunakan hide
dan show
. Di sinilah Anda dapat mulai memperluas fungsionalitas yang tersedia. The catalog_rule_form.xml
contoh yang saya sebutkan penggunaan sebelumnya setValidation
jika Anda ingin melihat contoh yang berbeda.
- Anda juga dapat menambahkan
<params>
apa pun action
yang memanggil mereka. Anda dapat melihat ini dalam catalog_rule_form.xml
contoh juga.
Akhirnya item terakhir di dalamnya switcherConfig
adalah <enabled>true</enabled>
. Ini seharusnya cukup mudah, ini adalah Boolean untuk mengaktifkan / menonaktifkan fungsi switcher yang baru saja kami implementasikan.
Dan kita sudah selesai. Jadi menggunakan contoh di atas apa yang harus Anda lihat adalah bidang yang field2Depend1
ditampilkan jika Anda memilih opsi dengan nilai 2
aktif field1
, dan field3Depend1
ditampilkan jika Anda memilih opsi dengan nilai 3
.
Saya telah menguji contoh ini hanya dengan menggunakan hide
dan show
pada bidang yang diperlukan dan itu tampaknya mempertimbangkan visibilitas untuk validasi. Dengan kata lain, jika field2Depend1
diperlukan hanya akan diperlukan saat terlihat. Tidak perlu konfigurasi lebih lanjut untuk itu berfungsi.
Semoga ini memberikan bantuan bagi siapa pun yang mencari solusi yang lebih out-of-the-box.