Question

对于自动化测试，我想填充角度4表格。但提交后，Angular并未意识到这些变化。

我有表单构建器使用formgroup和formcontrol。

在应用程序之外，我需要进行一些自动化测试。因此，当我尝试填写表单$('#firstName').val('John');并提交表单时：Angular会在表单中提供以前的值，但不会检测到它的更改。

我尝试了多种解决方案，但没有任何方法可以像

一样

在表单提交上运行更改检测
this.form.updateValueAndValidity()
玩ngZone
玩改变事件

我不知道如何强制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';

然后重新提交，你会看到角度没有更新数据，我想知道我怎么能这样做。

Answer 1

您正尝试使用非角度引用（如核心javascript元素选择器或jQuery元素选择器）访问角度conponent值。在非角度值输入后，您希望角度应在角度生命周期中更新数据。

您可以使用NgZone执行大量手动操作。虽然我从未尝试here，但您可以遵循该文件。

Angular的生命周期类似OnInit，严格遵循它们。例如，@Input字段值在ngOnInit()而非构造函数中可用。所以changeDetectionStrategy扮演着重要的角色。

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

希望它能回答你的问题。

Answer 2

您也可以分配在角度侧更新的值。请参考以下 stackoverflow 答案。 stackoverflow link

使用jQuery填充Angular4表单

2 个答案: