使用 jQuery 填写 Angular4 表单

Question

为了自动化测试，我要填写angular 4张表格。但是提交后，Angular并不知道有什么变化。

我有使用带有 formgroup 和 formcontrol 的表单生成器的表单。

在应用程序之外，我需要做一些自动化测试。因此，当我尝试填写表格 $('#firstName').val('John'); 并提交表格时：Angular 给我表格中的先前值并且没有检测到它的变化。

我尝试了多种解决方案，但都没有

运行表单提交变化检测
this.form.updateValueAndValidity()
和ngZone一起玩
玩 Change 事件

我不知道如何强制 Angular 检测我在表单上的更改。

更新HTML

<input type="text" class="input-event" name="firstName" id="firstName" placeholder="First Name" [formControlName]="formFieldNames.firstName" />

更新 2

这是一个例子：https://run.plnkr.co/sqseg6kObDICjdEa/

如果您用一些数据填写表单并提交，您将在控制台中获得正确的数据。

现在，如果你在控制台中输入 document.getElementById('fullname').value = 'Jean';

然后重新提交，你会看到angular没有更新数据，我想知道如何才能做到。

Answer 1

您正在尝试使用非 angular 引用访问 angular 组件值，例如核心 javascript 元素选择器或 jQuery 元素选择器。在非 angular 值输入后，您想要 angular 应该在 angular 生命周期中更新数据。

您可以通过使用 NgZone 进行大量手动操作来做到这一点。虽然我从未尝试过 here 是您可以遵循的文档。

Angular 有一个像 OnInit 一样的生命周期，并且严格遵循它们。例如 @Input 字段值在 ngOnInit() 而不是构造函数中可用。所以changeDetectionStrategy起着重要的作用。

因此，当您从 browsr 开发人员工具执行 $('#firstName').val('John'); 或 document.getElementById('fullname').value = 'Jean'; 时，因为这些不是事件（如 mouse over、keypress 等），更改检测策略没有检测到它们。但是如果你在该字段中写一些东西 angular 将检测到它们并更新模型

希望它能回答您的问题。

Answer 2

您也可以分配在 angular 端更新的值。请参考以下 Whosebug 答案。

使用 jQuery 填写 Angular4 表单

Fill Angular4 Form using jQuery

angular

angular-reactive-forms