how to make ui-component onload dependency field in admin

Question

how to make ui-component onload dependency field in admin

In magento 2, admin ui-component form i created some dependency field on value change handler. its working well but when edit the form dependent field are not appear.

view/adminhtml/web/js/applyoptions.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) {
 var field1 = uiRegistry.get('index = max_discount');
 var field2 = uiRegistry.get('index = priceselector');
 var field3 = uiRegistry.get('index = skip_rule');
 var field5 = uiRegistry.get('index = nqty');
 var field7 = uiRegistry.get('index = apply_discount_to');
 var field9 = uiRegistry.get('index = each_product');
 var field8 = uiRegistry.get('index = use_for');
 var field10 = uiRegistry.get('index = promo_sku_x');
 var field11 = uiRegistry.get('index = promo_sku_y');
 var field12 = uiRegistry.get('index = promo_category');
 var field13 = uiRegistry.get('index = promo_skus');
 if(value == 'thecheapest' || value == 'themostexpencive' || value == 'moneyamount') {
 field1.show();
 field2.show();
 field3.show();
 field5.hide();
 field7.hide();
 field8.hide();
 field9.hide();
 field10.hide();
 field11.hide();
 field12.hide();
 field13.hide();
 } 
 else if(value == 'buyxgetn_perc') {
 field1.show();
 field2.show();
 field3.show();
 field5.show();
 field7.hide(); 
 field8.hide(); 
 field9.hide(); 
 field10.show();
 field11.show();
 field12.show();
 field13.hide();
 } 
 else if( value == 'buyxgetn_fixdisc' || value == 'buyxgetn_fixprice') {
 field1.show();
 field2.hide();
 field3.show();
 field5.show();
 field7.hide(); 
 field8.hide(); 
 field9.hide(); 
 field10.show();
 field11.show();
 field12.show();
 field13.hide();
 } 
 else if(value == 'eachn_perc' || value == 'eachn_fixdisc' || value == 'eachn_fixprice') {
 field1.show();
 field2.show();
 field3.show();
 field5.hide();
 field7.show();
 field8.show();
 field9.hide();
 field10.hide();
 field11.hide();
 field12.hide();
 field13.hide();
 }
 else if(value == 'eachmaftn_perc' || value == 'eachmaftn_fixdisc' || value == 'eachmaftn_fixprice') {
 field1.show();
 field2.show();
 field3.show();
 field5.hide();
 field7.show();
 field8.hide();
 field9.show();
 field10.hide();
 field11.hide();
 field12.hide();
 field13.hide();
 }
 else if(value == 'groupn' ) {
 field1.show();
 field2.hide();
 field3.show();
 field5.hide();
 field7.show();
 field8.hide();
 field9.hide();
 field10.hide();
 field11.hide();
 field12.hide();
 field13.show();
 }
 else if(value == 'groupn_disc'){
 field1.show();
 field2.show();
 field3.show();
 field5.hide();
 field7.show();
 field8.hide();
 field9.hide();
 field10.hide();
 field11.hide();
 field12.hide();
 field13.show();
 }
 else {
 field1.hide();
 field2.hide();
 field3.hide();
 field5.hide();
 field7.hide();
 field8.hide();
 field9.hide();
 field10.hide();
 field11.hide();
 field12.hide();
 field13.hide();
 } 
 return this._super();
 },
 });
}); 

Answer 1

I found a solution for when edit a ui-component form dependent field are appear.

use a initialize function to show a dependent field on load a form

initialize: function () {
 this._super();
 this.onUpdate(this.value());
 return this;
 },

view/adminhtml/web/js/applyoptions.js

define([
 'underscore',
 'uiRegistry',
 'Magento_Ui/js/form/element/select',
 'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
 'use strict';
 return select.extend({ 
 initialize: function () {
 this._super();
 this.onUpdate(this.value());
 return this;
 }, 
 /**
 * On value change handler.
 *
 * @param {String} value
 */
 onUpdate: function (value) {
 var field1 = uiRegistry.get('index = max_discount');
 var field2 = uiRegistry.get('index = priceselector');
 var field3 = uiRegistry.get('index = skip_rule');
 var field5 = uiRegistry.get('index = nqty');
 var field7 = uiRegistry.get('index = apply_discount_to');
 var field9 = uiRegistry.get('index = each_product');
 var field8 = uiRegistry.get('index = use_for');
 var field10 = uiRegistry.get('index = promo_sku_x');
 var field11 = uiRegistry.get('index = promo_sku_y');
 var field12 = uiRegistry.get('index = promo_category');
 var field13 = uiRegistry.get('index = promo_skus');
 if(value == 'thecheapest' || value == 'themostexpencive' || value == 'moneyamount') {
 field1.show();
 field2.show();
 field3.show();
 field5.hide();
 field7.hide();
 field8.hide();
 field9.hide();
 field10.hide();
 field11.hide();
 field12.hide();
 field13.hide();
 } 
 else if(value == 'buyxgetn_perc') {
 field1.show();
 field2.show();
 field3.show();
 field5.show();
 field7.hide(); 
 field8.hide(); 
 field9.hide(); 
 field10.show();
 field11.show();
 field12.show();
 field13.hide();
 } 
 else if( value == 'buyxgetn_fixdisc' || value == 'buyxgetn_fixprice') {
 field1.show();
 field2.hide();
 field3.show();
 field5.show();
 field7.hide(); 
 field8.hide(); 
 field9.hide(); 
 field10.show();
 field11.show();
 field12.show();
 field13.hide();
 } 
 else if(value == 'eachn_perc' || value == 'eachn_fixdisc' || value == 'eachn_fixprice') {
 field1.show();
 field2.show();
 field3.show();
 field5.hide();
 field7.show();
 field8.show();
 field9.hide();
 field10.hide();
 field11.hide();
 field12.hide();
 field13.hide();
 }
 else if(value == 'eachmaftn_perc' || value == 'eachmaftn_fixdisc' || value == 'eachmaftn_fixprice') {
 field1.show();
 field2.show();
 field3.show();
 field5.hide();
 field7.show();
 field8.hide();
 field9.show();
 field10.hide();
 field11.hide();
 field12.hide();
 field13.hide();
 }
 else if(value == 'groupn' ) {
 field1.show();
 field2.hide();
 field3.show();
 field5.hide();
 field7.show();
 field8.hide();
 field9.hide();
 field10.hide();
 field11.hide();
 field12.hide();
 field13.show();
 }
 else if(value == 'groupn_disc'){
 field1.show();
 field2.show();
 field3.show();
 field5.hide();
 field7.show();
 field8.hide();
 field9.hide();
 field10.hide();
 field11.hide();
 field12.hide();
 field13.show();
 }
 else {
 field1.hide();
 field2.hide();
 field3.hide();
 field5.hide();
 field7.hide();
 field8.hide();
 field9.hide();
 field10.hide();
 field11.hide();
 field12.hide();
 field13.hide();
 } 
 return this._super();
 },
 });
});