Fill angular input using javascript

Question

Setting element's value is not working. It does not act like user typing. When I submit this input, popup tells me that I didn't fill input at all. How can I fill this input element just like users do?

<div class="login-input input-group" data-ng-class="{'invalid' : !valid}">
<input id="alias-input" type="text" class="form-control ng-pristine ng-valid ng-empty ng-valid-maxlength ng-touched" tabindex="1" data-ng-model="formData.alias" data-ng-keydown="sendAlias($event)" maxlength="10" data-gemius-event="click" data-gemius-parameters="['place=login','inputbox=login','met=onclick']"
    spellcheck="false">
</div>

I tried:

angular.element(document.querySelector("#alias-input")).val("foo");

document.getElementById('alias-input').value = 'foo';

Answer 1

This is what worked for me:

const event = new Event('input', { bubbles: true }); 
document.querySelectorAll('[formcontrolname = "idNumber"]')[0].value = '123456789';
document.querySelectorAll('[formcontrolname = "idNumber"]')[0].dispatchEvent(event);

This was tested on a page with Ionic 3.9.2 and Angular 5.0.3