gpt4 book ai didi

javascript - 使用 Vanilla JavaScript 编写 Angular 表单脚本

转载 作者:行者123 更新时间:2023-11-30 15:14:35 25 4
gpt4 key购买 nike

每年,我都有大约 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"]', 'happy@robot.com');

在字段被脚本填充后手动单击字段确实会触发脏状态,但我找不到任何可以以编程方式触发它的事件(更改、键入、按下等)。

如何使用普通 JavaScript 在 Angular 应用程序中成功填写和提交表单?

最佳答案

一个有用的见解可能是,对于 DOM 中的任何元素,您都可以通过以下方式获得其 Angular 范围:

angular.element(theElement).scope()

然后您可以使用此作用域从 Angular 应用程序本身之外执行各种操作,例如您在此处尝试执行的操作。它对于尝试从开发人员工具调试 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 循环。

关于javascript - 使用 Vanilla JavaScript 编写 Angular 表单脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44664715/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com