使用 jQuery 填写 Angular4 表单答案

【问题标题】：Fill Angular4 Form using jQuery使用 jQuery 填写 Angular4 表单
【发布时间】：2018-03-25 16:45:38
【问题描述】：

对于自动化测试，我想填写 angular 4 表格。但是在提交之后，Angular 并没有意识到这些变化。

我的表单使用带有表单组和表单控件的表单生成器。

在应用程序之外，我需要做一些自动化测试。因此，当我尝试填写表单 $('#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没有更新数据，我想知道我该怎么做。

【问题讨论】：

你也可以发布你的html页面
我更新了帖子。如您所见，普通的 HTML
您可以在组件 ts 类中将值设为 this. formFieldNames.controls['firstName'] 不确定是什么条件让您选择 jquery。还有ElementRef，你可以用它来处理元素并获取数据
jQuery只是一个例子，我再次更新了帖子，你可以查看。谢谢

标签： angular angular-reactive-forms

【解决方案1】：

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

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

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

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

希望它能回答你的问题。

【讨论】：

【解决方案2】：

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

【讨论】：