Как смоделировать взаимодействие пользователя с элементами ввода и кнопки?

Question

Итак, у меня есть код здесь в этом примере стекаблика .

В основном это простая форма с вводом и кнопкой. Нажатие кнопки скопирует текущее значение ввода в метку:

после нажатия:

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

Проблема заключается в следующем:

Я получил значение по умолчанию в метке, а не текущее значение. Как я могу получить правильное значение? Я подозреваю, что это что-то около отраженных свойств , но не могу понять, в чем здесь проблема.

Обновление: Я попробовал следующее, но безуспешно.

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

Answer 1

Angular обновляет модель при input событии. Вы должны запустить его вручную после установки значения.

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

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