时间戳

首页 > 解决方案 > 从开发者控制台填写 Angular 表单

javascript - 从开发者控制台填写 Angular 表单

问题描述

在 Angular 8 中，我能够做到这一点：

const el = document.querySelector("#first-name);
if (!el) { console.warn(item.selector, 'not found'); return; }
const probe = ng.probe(el);
const ref = probe.providerTokens.find(p => p.name === 'NgControl');
const directive = probe.injector.get(ref);
directive.control.setValue("Johnnie");

这将在其后面找到一个input带有 aformControlName和基于 Reactive Forms 的代码，设置其值，包括触发 Angular 中的任何更改检测。

在带有 Ivy 的 Angular 9 中，这不再有效，因为ng.probe已被删除以支持其他工具，尤其是ng.getComponent. 但是，该方法似乎主要用于获取实际的 Angular 组件，我不确定如何使用它来编辑表单值和触发更改检测。

Angular 9 和 Ivy 的方法是什么？

标签： javascriptangularangular9

解决方案

这对我有用，您只需更改普通 JS 中的输入值，然后触发更改事件。您可以对多个输入使用相同的事件。

const changeEvent = document.createEvent("HTMLEvents");
changeEvent.initEvent("change", false, true);

const el = document.querySelector("#first-name");
el.value = 3;
el.dispatchEvent(changeEvent);

推荐阅读