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
– Negi Rox, Commented Jul 2, 2018 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
– ForestG, Commented Jul 2, 2018 at 13:54
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
– ForestG, Commented Jul 2, 2018 at 14:04

ForestG · Accepted Answer · 2018-07-03 10:02:58Z

14

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 3, 2018 at 10:02

ForestG

18.2k16 gold badges64 silver badges94 bronze badges

answered Jul 3, 2018 at 9:12

Mihályi Zoltán

8826 silver badges13 bronze badges

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

1 Comment

ForestG Over a year ago

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)

Collectives™ on Stack Overflow

How to simulate user interaction on input and button elements?

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