使用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表單

回答

相關問題