Angular 6: Programmatically changing value of input element in production environment

Question

I am using a Angular 6 js script which I purchased without access to the underlying readable code. The js code I can see is webpack. I want to make a few small additions with plain js or jq. Specifically, I want to programmatically set values of input elements. In jq: $(selector).val(value). As I don't have access to the source code, I must add a custom js script to manipulate the input.

This is what I have tried:

Selecting the element and dispatch a click-keyboardevent to select it. Then I repeatedly fired keyboard events with the characters I wanted to enter as input. As I learned from https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent, manually firing a keyboard event will not result in the default behavior. So this let to nothing.
Following How to update a angular 4+ form values using console devtools? was also a dead end because the script is in production so ng.probe() doesn't work.
I managed to attach listeners to a few custom events that I could distill from the webpack code but none of them got me any further.
And, of course, I tried all shapes and forms of $(selector).val(value), both in jq and in plain js. All to no avail.

Any other suggestions how to go about this?

regapictures · Accepted Answer · 2022-07-01 08:33:03Z

3

After some trial and error, I found this to be working for Angular 12:

const input = document.querySelector(selector);
input.value = value;
input.dispatchEvent(new Event("input"));

In jQuery this would be something like:

$(selector).val(value).trigger("input");

answered Jul 1, 2022 at 8:33

regapictures

3813 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Punchcard Coder Over a year ago

Thanks, regapictures, for your help. It does the trick in most cases in Angular 6 (and presumably A7-11) as well.

Collectives™ on Stack Overflow

Angular 6: Programmatically changing value of input element in production environment

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related