JavaScript trigger an AngularJS input change event from external JavaScript

Use the dispatchEvent JavaScript function to trigger a form field's input event on a page that is using Angular.

This "input" trigger event was needed on an Angular 9.1.12 page:

function triggerInput(element) {
    element.dispatchEvent(
        new window.Event('input', { bubbles: true })
    );
}

Usage:

var nameInputField = document.querySelector('#name');
nameInputField.value = 'Alice';
triggerInput(nameInputField);

Other events may be similarly triggered:

function triggerMouseEvent(element, eventType) {
    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initEvent(eventType, true, true);
    element.dispatchEvent(clickEvent);
}

var myButton = document.querySelector('button');
triggerMouseEvent(myButton, 'mousedown');
triggerMouseEvent(myButton, 'mouseup');
View this page on GitHub.
Posted .

2 comments

  1. anonymous

    Thank you so much for this!!!

    1. Zach

      you're welcome!

Leave a Reply