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

Question

在 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");

这会找到一个带有 formControlName 和 Reactive Forms 代码的 input，设置它的值，包括触发 Angular 中的任何变化检测。

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

Angular 9 和 Ivy 的方法是什么？

Answer 1

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

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

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