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:
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.