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';

I am not developer of this site. I want to create automatic test and I have problems with filling this input. — dafie
– dafie, Commented Dec 5, 2018 at 8:42
@Chellappan this is angularjs he is talking about. So the link to this documentation is not relevant, it is the wrong framework. — enf0rcer
– enf0rcer, Commented Dec 5, 2018 at 8:53
@Dafie your problem is data-ng-model overrides any change you make to the value during digest cycles. So you need to set the value after any digest cycle ends or if you can guarantee somehow the last digest cycle has occurred, change the value then. — enf0rcer
– enf0rcer, Commented Dec 5, 2018 at 8:55

Asdrubal · Accepted Answer · 2019-07-01 01:05:03Z

14

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

answered Jul 1, 2019 at 1:05

Asdrubal

3585 silver badges10 bronze badges

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

2 Comments

eighilaza Over a year ago

Thank you, this helped me with a similar issue. Setting the value without calling dispatchEvent didn't allow to save the form.

Reena Verma Over a year ago

@Asdrubal - This helped me too! Thank you so much! Why do I need to create a new Event() though. And dispatch it. What exactly does this do under the hood? Thank you!

Andrea Naspi · Accepted Answer · 2018-12-07 17:17:57Z

1

You can set an ng-model attribute for the input element in the html like: ng-model = "inputValue". In the controller of this view, after inject the $scope, now you can set $scope.inputValue = "foo" and it will automatic update the input value.

Hope it helps.

answered Dec 7, 2018 at 17:17

Andrea Naspi

1191 silver badge6 bronze badges

Collectives™ on Stack Overflow

Fill angular input using javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related