Issue
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.
Solution
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()
Answered By - traynor
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.