How to simulate user interaction on input and button elements?

Question

So I have a code here in this stackblitz example.

Basicly there is a simple form, with an input and a button. Pressing the button will copy the input's current value to a label:

after click:

html:

<input id="inputID" [(ngModel)]="inputValue" />
<button id="buttonID" (click)="set()">send</button>
<hr/>
<label> new Value: {{labelValue}} </label>
<hr/>

JS:

  labelValue = "";
  inputValue = "defaultValue";

  set(){
    this.labelValue = JSON.parse(JSON.stringify(this.inputValue));
  }

I have to simulate the user interaction using only native JS code. So I try the following (in browser console for instance):

 - document.getElementById('inputID').value = "aNewValue"; 
 - document.getElementById('buttonID').click();

The problem is this:

I got the default value in the label, not the current value. How can I get the right value? I suspect that it is something around reflected properties, but cannot figure out what can be the problem here.

Update: I have tried the following, with no luck either.

element = document.getElementById('inputID')
element.value = "aNewValue"; 
var ev = new Event('change', {
    view: window, 
    bubbles: true,
    cancelable: true,
  });
element.dispatchEvent(ev);
document.getElementById('buttonID').click();

this will not happen becaue the model is not updating. angular is not aware what you are doing using dom property — Negi Rox, Jul 02 '18 at 13:53
Yeah, I suspect as much, but how can I simulate the interaction so the app will notice the change in the input field? — ForestG, Jul 02 '18 at 13:54
look into this https://stackoverflow.com/questions/17109850/update-angular-model-after-setting-input-value-with-jquery — Negi Rox, Jul 02 '18 at 13:59
sadly, I cannot use jQuery and I cannot triger the input change event... I am not even sure it is the same in Angular2+. — ForestG, Jul 02 '18 at 14:04
https://stackblitz.com/edit/native-clicker-tqxxls?file=src/app/app.component.ts — Roberto Zvjerković, Jul 02 '18 at 14:08
One of the reasons your "trigger the click from the console" is not working is because the button is located inside the iframe, not in the original document. document.getElementById('inputID') doesn't work for the StackBlitz snippet. — Roberto Zvjerković, Jul 02 '18 at 14:11
ritaj, please, just try to understand the problem or leave. (try the console INSIDE the stackblitz app) — ForestG, Jul 02 '18 at 14:16
Your problem is more than understood. Try to have a civilized discussion or leave the site, you're not getting any help this way, as you can already see. Good luck! — Roberto Zvjerković, Jul 03 '18 at 08:13

score 12 · Accepted Answer · edited Jul 03 '18 at 10:02

12

Angular updates the model on input event. You should trigger it manually, after you set the value.

inputElement = document.getElementById('inputID');
buttonElement = document.getElementById('buttonID');

inputElement.value = "aNewValue";
inputElement.dispatchEvent(new Event('input', {
  view: window,
  bubbles: true,
  cancelable: true
}))
buttonElement.click();

edited Jul 03 '18 at 10:02

ForestG

17,538
14
52
86

answered Jul 03 '18 at 09:12

Mihályi Zoltán

822
6
11

3

this works perfectly, thanks. To anyone with the same problem: It is important to understand, that in different frameworks, the event type that propagates the changes under the hood may differ. ('change' event for instance) – ForestG Jul 03 '18 at 09:56

How to simulate user interaction on input and button elements?

1 Answers1