Close popover
William Tran (wtran)
Cathay Bank
RPA Developer
Cathay Bank
wtran Member since 2019 6 posts
Cathay Bank
Posted: March 23, 2021
Last activity: March 24, 2021

How to trigger event for Angular ng-change function using JavaScript or Pega Robotics tool

Hello Collab Community,

I am working on interrogating a web based page built on Angular for the bot to perform automation tasks.  I currently ran into a roadblock trying to trigger one input field in order to open another. The html looks like this: <input type="text" class="recording-date ng-valid ng-dirty" placeholder="MM/DD/YYYY" data-ng-model="newOrderData.RecordingDate" ng-change="buildIndexFields()">

This input field is taking in a date. I was able to inject the date into the field but could not trigger any event. I was able to capture the field using JavaScript and also pass in some raise event methods to try to trigger an action using this script:

function raiseEvents(target, eventsArr) {     var events = eventsArr;          for(var i = 0; i < events.length; i++) {         try {             if (window.dispatchEvent) {                 if (events[i].indexOf("mouse") >= 0) {                 var eventObject = document.createEvent("MouseEvents");                 eventObject.initMouseEvent(events[i], true, true, window, 0, eventObject.screenX, eventObject.screenY, eventObject.clientX, eventObject.clientY, eventObject.ctrlKey, eventObject.altKey, eventObject.shiftKey, eventObject.metaKey, 0, null);                 console.log(events[i] + ": initialized as MouseEvents.");                 }                 else if (window.PointerEvent && events[i].indexOf("pointer") >= 0) {                     //var eventObject = document.createEvent("PointerEvent");                     //eventObject.initPointerEvent(events[i], true, true, window, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, null, 0, 0, 0, 0, 0, 0, 0, 0, 42, "mouse", 0, 0);                     var eventObject = new PointerEvent(events[i], { bubbles: true, cancelable: true, composed: true, pointerId: 42, pointerType: "mouse", clientX: 0, clientY: 0 });                     console.log(events[i] + ": initialized as PointerEvent");                 }                 else if (events[i].indexOf("blur") >= 0 || events[i].indexOf("focus") >= 0 ) {                     var eventObject = document.createEvent("FocusEvent");                     eventObject.initEvent(events[i], true, false);                     console.log(events[i] + ": initialized as FocusEvent");                 }                 else if (window.KeyboardEvent && events[i].indexOf("key") >= 0) {                     var eventObject = document.createEvent("KeyboardEvent");                     eventObject.initKeyboardEvent(events[i], true, true, window, 0, 0, 0, 0, 0, ('a').charCodeAt(0));                     console.log(events[i] + ": initialized as KeyboardEvent");                 }                 else {                     var eventObject = document.createEvent("Event");                     eventObject.initEvent(events[i], true, false);                     console.log(events[i] + ": initialized as Event");                 }                 target.dispatchEvent(eventObject);                 console.log(events[i] + ": dispatch complete");             }             else {                 var eventObject = document.createEventObject();                 console.log("EventObject is initialized (IE8)");                                  target.fireEvent("on" + events[i], eventObject);                 console.log("on" + events[i] + ": fire complete");             }         } catch (err) {             console.log(events[i] + ": " + err.message);         }     }  } var hoverEvents = ["mousemove", "mouseover", "focus", "focusin"]; var clickEvents = ["mousedown", "mouseup", "click"]; var leaveEvents = ["focusout", "blur", "mouseout", "mouseleave"]; var hoverClickEvents  = ["mousemove", "mouseover", "focus", "mousedown", "mouseup", "click"]; var keyEvents = ['keydown', 'keyup', 'keypress']; var noIdeaEvents= ["focus", "focusin", "mousemove", "hover", "mouseover", "mousedown", "mouseup", "click", "dblclick", "change", "mouseleave", "mouseout", "mouseenter", "blur", "focusout", "select", "pointermove", "pointerover", "pointerdown", "pointerup", "pointerout"]; //focus focusin mousemove hover mouseover mousedown mouseup click dblclick change mouseleave mouseout mouseenter blur focusout select pointermove pointerover pointerdown pointerup pointerout input  

 I found that this script did not trigger any events and I suspect that I must somehow pass this date into that ng-change function buildIndexFields(). Does anyone know how to go about this with Angular? I believe this function is used to validate the date. I was able to capture the Angular element but is there anything that I could do with this. Perhaps if there is a way to inject the value to see if it will trigger the event. Thanks in advance. Below are the screenshots.

***Edited by Moderator: Pooja Gadige to add platform capability tag***
Pega Robotic Process Automation 19.1 Robotic Process Automation User Experience Financial Services