How to hide particular admin form field(UI Component) based on the value of select field?

Question

I used the following script to hide/show 'schedule_date' based on select field option change, and it is working fine. But I want to hide/display the fields without changing the select field options.

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

            var sdate = uiRegistry.get('index = schedule_date');

            if(value==1){

                sdate.show();
            } else {
                sdate.hide();
            }

            return this._super();
        }
    });
});

Answer 1

I have used this code in my admin form and it is working fine on both add and edit case

require([
    'jquery'
], function($){
    jQuery(document).ready(function(){
        //get element by id and hide it on first page load
        jQuery('#schedule_date').hide()
        //check current value of selected id (This will work in edit case)
        if(jQuery('#select_id').val()==1){
            jQuery('#schedule_date').show();
        }
        //Add select box change event and show/hide element accordingly
        jQuery('#select_id').change(function() {
            if(jQuery(this).val() == 1){
                jQuery('#schedule_date').show();
            }
            else{
                jQuery('#schedule_date').hide();
            }
        });        
    });
});

On first it will hide/show schedule_date according to current value of select box, and after update of select box it will hide/show schedule_date accordingly

Answer 2

Finally, I found a solution to this requirement. While the select field gets initialized, based on its value it, we can hide/display the corresponding fields.

initialize: function () {
            this._super();
            if (this.customEntry) {
                registry.get(this.name, this.initInput.bind(this));
            }
            if (this.filterBy) {
                this.initFilter();
            }
            var sdate = uiRegistry.get('index = schedule_date');
            if(this.value()==1){
                sdate.show();
            } else {
                sdate.hide();
            }
            return this;
        }