如何在输入和按钮元素上模拟用户交互?

所以我在这里有一个代码,在这个stackblitz示例中。

基本上有一个简单的表单,有一个输入和一个按钮。按下按钮将把输入的当前值复制到标签上:

单击后:

HTML:。

<input id=“inputid”[(ngmodel)]=“输入值”/>
<button id=“buttonid”(单击)=“set()”>发送</button>
<hr/>
<label>新值:label value</label>
<hr/>
JS:。

labelValue=“”;
inputValue=“默认值”;

集()
this.labelValue=json.parse(json.stringify(this.inputValue));
}
我必须仅使用本机JS代码模拟用户交互。
所以我尝试以下方法(例如在浏览器控制台中):


-document.getElementByID('inputid').value=“anewValue”;
-document.getElementByID('buttonID').click();
问题是:



我得到了标签中的默认值,而不是当前值。如何获得正确的值?我怀疑这是围绕reflected properties的问题,但无法找出此处的问题所在。

更新:我尝试了以下方法,但也没有运气。


element=document.getElementByID('inputid')
element.value=“anewvalue”;
var ev=新事件(“更改”,){
视图:窗口,
气泡:是的,
可取消:是,
(});
要素.调度(ev);
document.getElementByID('buttonID').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));
  }


我必须只使用本机JS代码来模拟用户交互。
因此,我尝试以下方法(例如在浏览器控制台中):

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


问题是:



我得到了标签中的默认值,而不是当前值。如何获得正确的值?我怀疑周围有什么东西reflected properties但无法找出问题所在。

更新:我试过以下的方法,但也不走运。

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