How to add individual change event to input controls using FormBuilder

Question

How to add a change event to an individual input control using FormBuilder. Currently we can listen to the "change" event of entire form by configuring "Logic" in the designer screen for each control.

There are two options that I could try out

1. Listen to the common "change" event and write your code in a way that, no matter how many times it executes, it should produce the same result(The logic inside the change event should be idempotent)

2. Try to get the HtmlElement of the control using

var control = document.querySelector("[name='control_id']");
control.addEventListener('change',()=>{
   console.log("Your logic goes here");
});

In the second option, you will have to handle the event being added multiple times and some control like "Datepicker" it is difficult to add such change/input event as it is works using hidden fields internally.

I would like to know a better solution to this.

Answer 1

Finally I figured out the answer to this question. You can add logic and listen to the 'change' event for the component you wish to listen to the change event. In the 'Actions' you should configure 'CustomAction' in which you will get a default variable called 'result'. So if you want to understand whether the event generated by your specific component you can write something like

var object = result[1];
if(object && object.changed.component.key==='your component key') {
   // your code goes here
}