C'est une vieille question avec plusieurs réponses qui fonctionnent, mais j'ai découvert une solution utilisant ce que Magento fournit (à partir de 2.1.0) sans avoir besoin d'étendre les composants. Comme plusieurs questions ont été marquées comme étant en double et dirigées ici, j'ai pensé qu'il serait utile de fournir des informations sur cette option.
Tous les composants ui de l'élément de formulaire qui s'étendent Magento_Ui/js/form/element/abstract.jsont un switcherConfigparamètre disponible à des fins telles que le masquage / affichage des éléments ainsi que d'autres actions. Le switchercomposant peut être trouvé sur Magento_Ui / js / form / switcher pour les curieux. Vous pouvez en trouver des exemples dans sales_rule_form.xml et catalog_rule_form.xml . Bien sûr, si vous utilisez déjà votre propre composant personnalisé, vous pouvez toujours l'utiliser aussi longtemps que votre composant s'étend finalement, abstractce qui semble être le cas en fonction de l'exemple de code fourni dans la question.
Maintenant, pour un exemple plus spécifique pour répondre à la question d'origine.
Dans, Namespace/ModuleName/view/adminhtml/ui_component/your_entity_form.xmlvous devez simplement ajouter ce qui suit aux champs settingsqui font le contrôle (c'est-à-dire le champ qui détermine quels champs sont masqués / visibles). Dans votre exemple, ce serait 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>
Décomposons-le un peu. Le switchercomposant contient un tableau rulesdont nous construisons ici. Chacun <rule>a un nom qui est un nombre dans cet exemple. Ce nom est la clé / l'index du tableau pour cet élément. Nous utilisons des nombres comme index de tableau. Les cordes devraient aussi fonctionner mais je n'ai pas testé cette théorie .
MISE À JOUR - Comme mentionné par @ChristopheFerreboeuf dans les commentaires, les chaînes ne fonctionnent pas ici. Ce sont des tableaux et doivent commencer par 0, pas des chaînes ou 1.
À l'intérieur de chacun, rulenous passons deux arguments.
value- C'est la valeur field1qui doit déclencher la actionsdéfinition ci-dessous.actions- Ici, nous avons un autre tableau. Ce sont les actions à déclencher lorsque les conditions de cette règle sont remplies. Encore une fois, actionle nom de chacun n'est que l'index / la clé du tableau de cet élément.
Maintenant, chacun actiona également deux arguments (avec un 3e optionnel).
target- C'est l'élément que vous souhaitez manipuler dans le cadre de cette action. Si vous ne savez pas comment les noms des éléments ui_component sont composés dans Magento, vous pouvez consulter l'article d'Alan Storm . C'est fondamentalement quelque chose comme {component_name}.{component_name}.{fieldset_name}.{field_name}dans cet exemple.callback- Voici les mesures à prendre dans ce qui précède target. Ce rappel doit être une fonction disponible sur l'élément ciblé. Notre exemple utilise hideet show. C'est là que vous pouvez commencer à développer les fonctionnalités disponibles. L' catalog_rule_form.xmlexemple que j'ai mentionné plus haut utilise setValidationsi vous souhaitez voir un autre exemple.- Vous pouvez également ajouter
<params>à tout ce actionqui les appelle. Vous pouvez également le voir dans l' catalog_rule_form.xmlexemple.
Enfin, le dernier élément à l'intérieur switcherConfigest <enabled>true</enabled>. Cela devrait être assez simple, c'est un booléen pour activer / désactiver la fonctionnalité de commutateur que nous venons d'implémenter.
Et nous avons terminé. Donc , en utilisant l'exemple ci - dessus ce que vous devriez voir est le champ field2Depend1affiché si vous choisissez une option avec une valeur 2sur field1, et field3Depend1affiché si vous choisissez une option avec la valeur 3.
J'ai testé cet exemple en utilisant uniquement hideet showsur un champ obligatoire et il semble prendre en compte la visibilité pour la validation. En d'autres termes, si field2Depend1nécessaire, il ne sera requis que lorsqu'il sera visible. Pas besoin de configuration supplémentaire pour que cela fonctionne.
J'espère que cela fournira de l'aide à tous ceux qui recherchent une solution plus prête à l'emploi.
