Show hide admin form fields on change Magento 2

Question

I want to show-hide wood type on the basis of change of type field.

Here is my _prepareForm code:-

 $model = $this->_coreRegistry->registry('current_model');
 $isElementDisabled = !$this->_isAllowedAction('Krisha_Visualizer::content');
 $form = $this->_formFactory->create();
 $form->setHtmlIdPrefix('content_');
 $fieldset = $form->addFieldset('base_fieldset', ['legend' => __('Visualizer Content Information')]);
 if ($model->getId()) {
 $fieldset->addField('visualizer_id', 'hidden', ['name' => 'id']);
 }
 $fieldset->addField(
 'name',
 'text',
 [
 'name' => 'post[name]',
 'label' => __('Name'),
 'title' => __('Name'),
 'required' => true,
 'disabled' => $isElementDisabled
 ]
 );
 $fieldset->addField(
 'is_active',
 'select',
 [
 'label' => __('Status'),
 'title' => __('Visualizer Status'),
 'name' => 'post[is_active]',
 'required' => true,
 'options' => $model->getAvailableStatuses(),
 'disabled' => $isElementDisabled
 ]
 );
 if (!$model->getId()) {
 $model->setData('is_active', $isElementDisabled ? '0' : '1');
 }
 $fieldset->addField(
 'type',
 'select',
 [
 'label' => __('Type'),
 'title' => __('Visualizer type'),
 'name' => 'post[type]',
 'required' => true,
 'options' => $model->getAvailableTypes(),
 'disabled' => $isElementDisabled
 ]
 );
 if (!$model->getId()) {
 $model->setData('type', $isElementDisabled ? '0' : '1');
 }
 $fieldset->addField(
 'wood_type',
 'select',
 [
 'label' => __('Wood Type'),
 'title' => __('Visualizer Wood type'),
 'name' => 'post[wood_type]',
 'required' => true,
 'options' => $model->getAvailableWoodTypes(),
 'disabled' => $isElementDisabled
 ]
 );
 if (!$model->getId()) {
 $model->setData('wood_type', $isElementDisabled ? '0' : '1');
 }
 $fieldset->addField(
 'small_image',
 'image',
 [
 'title' => __('Small Image'),
 'label' => __('Small Image'),
 'name' => 'post[small_image]',
 'note' => __('Allow image type: jpg, jpeg, gif, png'),
 ]
 );
 $fieldset->addField(
 'main_image',
 'image',
 [
 'title' => __('Main Image'),
 'label' => __('Main Image'),
 'name' => 'post[main_image]',
 'note' => __('Allow image type: jpg, jpeg, gif, png'),
 ]
 );
 $this->_eventManager->dispatch('krisha_visualizer_content_edit_tab_main_prepare_form', ['form' => $form]);
 $form->setValues($model->getData());
 $this->setForm($form);
 return parent::_prepareForm(); 

Thank you

Answer 1

Overview:

1. Add JS script that will handle the disabling logic doc: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js_init.html
2. Use jQuery to handle 'type' field's 'change' event

In details:

1. Add script to your page's .phtml:

<?php
/** @var $block \Magento\<%your_module%>\Block\Adminhtml\<%your_block_name%> */
?>
 {
 "*": {
 "<%your_module%>/js/hideOnChange": {
 "field": "wood_type"
 "dependantOnField": "type"
 "valuesToHideOn": <?php echo $block-><%method_name%>()); ?>
 }
 }
 }

here <%method_name%> is the method of block which will return values of 'type', on which 'wood_type' must be hidden.

2. $fieldset->addField('type', ..) means that html element with id='type' will be generated. So code in the <%your_module%>/../js/hideOnChange.js file:

define([
 'jquery',
 'underscore'
], function (,ドル _) {
 'use strict';
 var valuesToHideOn = this.valuesToHideOn,
 field = $('#' + this.field),
 dependantOnField = $('#' + this.dependantOnField);
 dependantOnField.on('change.type', function () {
 _.contains(valuesToHideOn, $(this).val()) ?
 field.addClass('hidden') :
 field.removeClass('hidden');
 });
});

Answer 2

I think the UI Components itself allows you to do a lot of basic stuff, but if you really need some logic behind it, you can use form modifiers as described in the Dev Docs: http://devdocs.magento.com/guides/v2.1/howdoi/customize_product.html

Create your own modifier and do what you need in the modifyMeta method. To remove items just unset them from the $meta array.