Angular form population via JS

Question

I am new to Angular and I need to populate the inputs of this form from outside of the browser via injecting JS (Winform Chromium control).

<form ng-if="!loginController.authentication.formsDisabled" novalidate="" class="css-form ng-pristine ng-valid ng-scope" name="form">
    <input type="text" class="textField ng-pristine ng-valid ng-empty ng-touched" tabindex="1" placeholder="Username" ng-model="loginController.user.name" name="username" autofocus="autofocus" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" ng-trim="false">
    <input type="password" class="textField ng-pristine ng-untouched ng-valid ng-empty" tabindex="2" placeholder="Password" autocomplete="off" ng-model="loginController.user.password" name="password">
    <!-- ngIf: loginController.errorInformation -->
    <!-- ngIf: !loginController.allowSaveInformation -->
    <div class="logOnCheckBoxDiv" ng-show="loginController.allowSaveInformation">
        <input id="remember_password_option" tabindex="3" type="checkbox" name="remember_password" ng-model="loginController.user.saveLoginInformation" class="ng-pristine ng-untouched ng-valid ng-empty">
        <label for="remember_password_option" class="ng-binding"><span></span>Keep me logged in</label>
    </div>
    <button ng-click="loginController.login()" class="LoginButton" tabindex="4">
        <div ng-hide="loginController.loginPending" class="ng-binding">Log in</div>
        <div ng-show="loginController.loginPending" class="loginSpinner ng-hide">
            <!-- ngInclude: --><ng-include src="'spinnerTransparent.tpl.html'" class="ng-scope"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" class="ng-scope"><g fill="currentColor">        <circle class="tss-progress__dot" cx="34.5" cy="7.5" r="6.5"></circle>      <circle class="tss-progress__dot" cx="55.5" cy="15.5" r="6.5"></circle>     <circle class="tss-progress__dot" cx="62.5" cy="35.5" r="6.5"></circle>     <circle class="tss-progress__dot" cx="55.5" cy="55.5" r="6.5"></circle>     <circle class="tss-progress__dot" cx="34.5" cy="62.5" r="6.5"></circle>     <circle class="tss-progress__dot" cx="14.5" cy="55.5" r="6.5"></circle>     <circle class="tss-progress__dot" cx="7.5" cy="35.5" r="6.5"></circle>      <circle class="tss-progress__dot" cx="14.5" cy="15.5" r="6.5"></circle></g></svg></ng-include>
        </div>
    </button>
</form>

To clarify - I have no control over how the form comes in. But I can inject whatever JS I can think of once it's loaded. So I do this:

@"document.querySelector('[placeholder=Username]').value='" + username + "'; "+

@"document.querySelector('[placeholder=Password]').value='" + password + "'; "

to populate the inputs and I DO SEE those in the browser control as populated. But when I click the login button, it reports an invalid user name or password.

Meanwhile, if I type the same user name and password into those inputs as a user would, it does log in. In fact, even if I add a space to them and then delete that space, it logs in.

Does this have something to do with how Angular does things?

Or should this have worked?

Do I need to do something special to make these things updated:

ng-pristine ng-untouched ng-valid ng-empty

I found some Angular examples where setValue() method is called, but setValue does not seem to be defined. Also, form.controls is not defined.

traynor · Accepted Answer · 2022-11-01T06:26:21.097

1

Try dispatching the input event after entering value so that it gets picked up later when submitted:

@"document.querySelector('[placeholder=Username]').value='" + username + "'; "+
@"document.querySelector('[placeholder=Username]').dispatchEvent(new Event('input'));

@"document.querySelector('[placeholder=Password]').value='" + password + "'; "
@"document.querySelector('[placeholder=Password]').dispatchEvent(new Event('input'));

and then submit it the same way:

@"document.forms[0].dispatchEvent(new Event('submit'));

or by clicking the submit button

@"document.querySelector('button').click()

edited Nov 01 '22 at 06:26

answered Oct 31 '22 at 20:38

traynor

5,490
3
13
23

Thank you! It worked, now I am trying to submit that form like so but it does not want to: document.querySelector('[name=form]').submit(); – ILIA BROUDNO Nov 01 '22 at 00:38
@ILIABROUDNO try `"document.forms[0].dispatchEvent(new Event('submit'))` or clicking the submit button, I've updated the code – traynor Nov 01 '22 at 06:27
Thank you @traynor, document.querySelector('button').click() worked. The other 2 didn't. I wonder why do things not work the normal way? For example why do we need to not only change the value of an input but also do a whole other step - fire off an event - is this how it is meant to be in Angular? Or is this not Angular, but something else making things hard? Doesn't seem right that a Framework on top of Javascript is making it more complex to do simple things than in basic JavaScript. – ILIA BROUDNO Nov 01 '22 at 08:24
@ILIABROUDNO hmm, dispatching `submit` on form should work, too.. yes, it's because angular is using events, as to the other part, well, there are many debates about frameworks out there.. – traynor Nov 01 '22 at 08:59

Angular form population via JS

1 Answers1