使用jQuery填充Angular4表单

对于自动化测试，我想填充角4表单。但是在提交之后，Angular没有意识到这些变化。使用jQuery填充Angular4表单

我有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';

并重新提交，您将看到的角度没有更新的数据，我想知道我怎样才能使它如此。

来源

2017-10-13 fred.kassi

你能不能发布你的html页面？ –

我更新了这篇文章。正如你所看到的，正常的HTML –

你可以在你的组件ts类中得到这个值。 formFieldNames.controls ['firstName']'不确定什么情况会让你打开jquery。还有'ElementRef'可以用来控制元素并获取数据 –

您正试图访问非角度参考像核心JavaScript元素选择器或jQuery元素选择器角对角值。在非角度值输入之后，您希望角度更新角度生命周期中的数据。

你可以通过使用NgZone来做很多手动操作。尽管我从未尝试here是您可以遵循的文档。

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

所以，当你从browsr开发工具执行$('#firstName').val('John');或document.getElementById('fullname').value = 'Jean';，因为这些都不是事件（如mouse over，keypress等），改变检测的战略并没有探测到它们。但如果你会在该领域写东西角会检测到他们并更新模型

希望它回答你的问题。

来源

2017-10-13 15:21:47

使用jQuery填充Angular4表单

回答

相关问题