从开发者控制台填写 Angular 表单答案

【问题标题】：Fill Angular form from developer console从开发者控制台填写 Angular 表单
【发布时间】：2020-04-01 17:49:29
【问题描述】：

在 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 的input 和基于响应式表单的代码，设置它的值，包括触发Angular 中的任何更改检测。

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

Angular 9 和 Ivy 的方法是什么？

【问题讨论】：

标签： javascript angular angular9

【解决方案1】：

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

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

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

【讨论】：