UI component hidden input on checkout address

Question

I am adding custom field on Magento 2 checkout shipping address. It's a hidden input. The value should be automatically updated based on another custom field which is a select (populated from ajax response data), using its option text/label. How can I "link" between input value and selected option text?

In my current custom component for the select, it already export the value to input

 exports: {
 value: '${ $.provider }:shippingAddress.custom_attributes.subdstrict:value'
 }

But it sends the selected value instead of the text. how to send the selected option text instead?

• Sumit Verma: Teja, did you find any solution for this.

Answer 1

I managed to achieve this using this code

 return Select.extend({
 defaults: {
 skipValidation: false,
 exports: {
 // Don: any change to subdisrict_id dropdown will "send" notifcation to subdistrict input
 selectedSubdistrictName: '${ $.provider }:${ $.customScope }.custom_attributes.subdistrict:value'
 }
 },
 /**
 * @inheritdoc
 */
 initObservable: function () {
 this._super()
 .observe(['selectedSubdistrictName']);
 return this;
 },
 /**
 * Filters 'initialOptions' property by 'field' and 'value' passed,
 * calls 'setOptions' passing the result to it
 *
 * @param {*} value
 * @param {String} field
 */
 initialize : function(){
 var self = this;
 this._super();
 self.value.subscribe(function(value){
 self.selectedSubdistrictName( self.getPreview() );
 }, this)
 },
filter: function (value, field) {
 if(value) {
 var thisField = this;
 $.ajax({
 type: 'GET',
 url: '/rest/V1/fabelio-directory/subdistricts/' + value,
 dataType: 'json',
 success: function(data) {
 // rename keys
 var options = [];
 var option = {};
 for(var i = 0; i < data.length; i++) {
 option = {
 'value': data[i].subdistrict_id,
 'label': data[i].name
 };
 options.push(option);
 }
 thisField.setOptions(options);
 },
 error: function() {
 },
 complete: function() {
 }
 });
 }
 }
});
});