通过 JS 填充 Angular 表单

Question

我是 Angular 的新手，我需要通过注入 JS（Winform Chromium 控件）从浏览器外部填充此表单的输入。

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

澄清一下-我无法控制表单的输入方式。但是一旦加载，我可以注入我能想到的任何 JS。 所以我这样做：

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

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

填充输入，我确实看到浏览器控件中的那些已填充。 但是当我单击他的登录按钮时，它会报告无效的用户名或密码。 同时，如果我像用户一样在这些输入中键入相同的用户名和密码，它确实会登录。事实上，即使我向它们添加一个空间然后删除该空间，它也会登录。 这是否与 Angular 的工作方式有关？ 或者这应该有效吗？ 我是否可能需要做一些特别的事情来更新这些东西：

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

我发现了一些调用 setValue() 方法的 Angular 示例，但似乎没有定义 setValue。 form.controls 也没有定义。

Answer 1

尝试在输入值后分派输入事件，以便稍后在提交时将其拾取：

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

然后以同样的方式提交：

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

或点击提交按钮

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