Question

0

344

Views

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

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?

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T09:17:32.636Z

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");

0

344

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

1 answers

0

Find remote jobs

Andres GPT