使用香草JavaScript编写角度表单脚本

每年，我都会有一个大约100行的电子表格，我需要通过一个笨重的表格一次提交一行到一个站点。我没有浪费时间100次手工填写表单，而是浪费时间编写一些JavaScript来处理表单

这段代码已经为我服务了3年，但现在他们已经升级到Angular JS应用程序，现在我不知道如何像填人一样填表格

以这个角形为例

在我能够设置元素的值之前，单击它们以确保触发脏状态，单击提交，然后完成，但角度应用程序似乎不起作用：

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"]', 'happy@robot.com');

在脚本填充字段后手动单击这些字段确实会触发脏状态，但我找不到任何可以通过编程触发脏状态的事件（change、keyup、keydown等）

---

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

一个有用的见解是，对于DOM中的任何元素，您都可以通过以下操作获得其Angular范围：

angular.element(theElement).scope()

然后，您可以使用此范围从angular应用程序itsef之外执行各种操作，例如您在这里尝试执行的操作。它对于尝试从开发人员工具调试angular应用程序特别有用

作为此技术的快速演示，我调整了您的笔以设置名称字段：

执行该工作的功能是：

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

angular有一个

$digest

循环，它将支持

ng模型的变量状态与每个表单元素的输入状态相匹配。以编程方式更改输入不会触发
$digest
，因此不会反映外部更改，任何触发
$digest
的操作都可能会消除这些外部更改。您必须挂接页面上的angular应用程序，并使用
$scope.$apply（）
手动触发
$digest
，但此时，您可能应该直接更改变量值，而不是将值注入输入。