Angular form population via JS-CodePudding

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=""  name="form">
    <input type="text"  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"  tabindex="2" placeholder="Password" autocomplete="off" ng-model="loginController.user.password" name="password">
    <!-- ngIf: loginController.errorInformation -->
    <!-- ngIf: !loginController.allowSaveInformation -->
    <div  ng-show="loginController.allowSaveInformation">
        <input id="remember_password_option" tabindex="3" type="checkbox" name="remember_password" ng-model="loginController.user.saveLoginInformation" >
        <label for="remember_password_option" ><span></span>Keep me logged in</label>
    </div>
    <button ng-click="loginController.login()"  tabindex="4">
        <div ng-hide="loginController.loginPending" >Log in</div>
        <div ng-show="loginController.loginPending" >
            <!-- ngInclude: --><ng-include src="'spinnerTransparent.tpl.html'" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" ><g fill="currentColor">        <circle  cx="34.5" cy="7.5" r="6.5"></circle>      <circle  cx="55.5" cy="15.5" r="6.5"></circle>     <circle  cx="62.5" cy="35.5" r="6.5"></circle>     <circle  cx="55.5" cy="55.5" r="6.5"></circle>     <circle  cx="34.5" cy="62.5" r="6.5"></circle>     <circle  cx="14.5" cy="55.5" r="6.5"></circle>     <circle  cx="7.5" cy="35.5" r="6.5"></circle>      <circle  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 he login button it reports invalid user name or password. Meanwhile if I type those same user name and password into those inputs as 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 may be need to do something special to make these things updtaed:

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.

CodePudding user response：

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