使用纯JavaScript编写Angular表单脚本

Question

每年，我都有一张包含约100行数据的电子表格需要通过笨拙的表单逐行提交到一个网站。为了不浪费时间手动填写100次表单，我花费了时间编写一些JavaScript代码来处理它。

这段代码已经服务了我3年，但现在他们升级到了Angular JS应用程序，现在我不确定如何像人类一样填写这些表单。

以这个Angular表单为例：https://codepen.io/sevilayha/full/xFcdI/ 之前，我能够设置元素的值，点击它们以确保脏状态被触发，点击提交，然后就完成了，但对于Angular应用程序似乎不起作用。

function setAndClick(selector, value) {
  const el = document.querySelector(selector);
  el.value = value;
  el.click();
}
setAndClick('[name="name"]', 'Happy Robot');
setAndClick('[name="username"]', 'happyrobot');
setAndClick('[name="email"]', '[e-mail]');

手动单击脚本填充字段后会触发一个dirty状态，但我找不到任何事件（change、keyup、keydown等）可以通过编程触发它。

如何使用纯JavaScript成功填写和提交Angular应用程序中的表单？

- fny

---

Angular有一个$digest循环，它将每个表单元素的ng-model支持的变量状态与输入状态进行匹配。通过编程方式更改输入不会触发$digest，因此外部更改不会反映出来，而任何*触发$digest的内容都可能会清除这些外部更改。您需要钩入页面上的angular应用程序并使用$scope.$apply()手动触发$digest，但在那时，您可能应该直接更改变量值，而不是将值注入到输入中。 - Claies

Answer 1

一个有用的见解是，对于DOM中的任何元素，您可以通过执行以下操作来获取其angular作用域：

angular.element(theElement).scope()

你可以使用这个范围来做各种事情，比如你正在尝试做的事情。它特别适用于从开发者工具中尝试调试angular应用程序。

作为这种技术的快速演示，我已经调整了你的Pen来设置名称字段：

https://codepen.io/anon/pen/pwPdqM

执行工作的函数是：

function dirtyByCode() {
  // Get the input element wrapped up as an angular element
  var elName = angular.element(document.getElementsByName("name")[0]);
  // Get the angular scope for this element
  var $scope = elName.scope();
  // Call $setViewValue, which also sets the dirty state.
  $scope.userForm.name.$setViewValue("Simon");
  // Call render to update the form itself.
  elName.controller("ngModel").$render();
}

这样做的优点是您不需要使用$apply或担心$digest循环。

- sifriday

---

如果我没有访问angular变量的权限怎么办？ - SunAwtCanvas