2013-10-03 56 views
8

在我的控制器中,我只想在表單有效時調用一個動作(比如在Tab按下)。此外,我還需要在表單成功提交後立即清除表單。我有這樣的事情單元測試控制器,取決於AngularJS中的表單驗證

app.controller('CommentFormController', function($scope) { 
    $scope.submit = function() { 
    if($scope.commentForm.$valid) { 
     // submit form 
     $scope.comment = ''; 
     $scope.commentForm.$setPristine(); 
    } 
    } 
}); 

我想對此進行測試,但它看起來像我要創建這個$scope.contactForm手動和存根出$setPristine()功能。

是否有任何其他方式來測試它?我的意思是我可以以某種方式在我的測試中獲得底層FormController的實例嗎?

你如何處理這種情況?

+2

如果我找到一個體面的方式來實現這一點,我會添加它作爲一個答案,但我處於同樣的情況在莫,並有一些想法。當模板加載時,表單會自動綁定到範圍,也就是驗證接入的時候。我們在這些單元測試中沒有訪問模板,這意味着我們應該用e2e進行測試,但是如果您需要,這可能會有點痛苦嘲笑你的後端。該團隊也正在切換到量角器進行e2e測試,但這些並不是TDD友好的。如果我取得任何進展,將會更新。 – daddywoodland

+1

我也想知道做這件事的最佳方式,因爲此刻我正在做類似如下的事情: $ scope.commentForm = {$ setPristine:function(){}}; – CallumD

+0

是的@daddywoodland說,它似乎缺乏模板 - 它在一個指令(因爲你加入和$編譯HTML).. –

回答

1

將窗體設置爲pristine將影響窗體的狀態,但不會將窗體重置爲默認值(如果您提供了它們)。相反,您可以使用DOM元素方法reset()。

事情是這樣的:

document.getElementById("yourform").reset(); 

,或者因爲angularJS和jQuery發揮很好,你可以使用CSS選擇器(如果你有要清除一次多種形式尤其有用

因此,一些。像:

$("#yourform")[0].reset(); 

有純JavaScript的方式來做到這一點也: http://www.javascript-coder.com/javascript-form/javascript-reset-form.phtml

---總之,您不需要使用特定方法來執行此操作,只需使用DOM方法,jQuery或純javascript即可。 Google很可能會提供一種方法來儘快完成此項任務。希望這可以幫助。

0

@grafthez當我通過$ scope.myForm。$ valid在我的控制器中驗證表單有效時,我得到了同樣的問題。

我在https://stackoverflow.com/a/17129354上找到了解決方案。你可以嘗試注入$ compile然後$ compile(yourFormTemplate)($ scope)。