由第 3 方 JS 注入提交的棘手的编程 AngularJS 表单

Question

这是一个棘手的问题。我正在编写一个 Tampermonkey（用于 chrome 的香草 JS 注入器插件）脚本来自动化我每天用于工作数百次的第三方站点。我坚持的部分是我相信一个 AngularJS 表单（下面的代码）。我需要更改输入的值并提交它，以便它可以更新网站上的表格。请注意，它不会重载网站，它适用于 ajax/jquery/AngularJS（不知道）。

我注意到棘手的部分在于输入，“ng-pristine ng-valid”似乎是一些AngularJS数据验证，这是提交表单所必需的，虽然我不知道如何触发它更改输入值后/也不如何提交表单。更改值似乎有效。整个表单都在 iframe 中，但不确定这是否有任何区别。

我在下面添加了元素的 ID，以便更容易引用这些元素，但它们通常不存在于代码中，我通过 querySelectors 获取它们

<form id="form" ng-submit="updateTab()" class="ng-pristine ng-valid">
    <div class="input">
      <div class="input__container">
        <input id="input" type="text" class="input ng-pristine ng-valid" ng-model="QueryParams.query">
        <button id="button" class="button">Search</button>
      </div>
    </div>
</form>

在简单地设置值并单击按钮之前，我已经做了很多次这样的事情：

document.getElementById("input").value = "some value";
document.getElementById("button").Click();

但它不起作用。在值更改之后和 .click() 之前，我也尝试了以下操作，因为似乎有一些数据验证，但它仍然没有帮助。

document.getElementById("input").dispatchEvent(new Event("change"));
document.getElementById("input").onchange();

提交表单只是重新加载网站，没有任何作用。

Answer 1

有很多方法可以解决这个问题，哪种方法正确通常取决于具体情况。这个问题：Angular.js programmatically setting a form field to dirty 列出了其中的一些问题。