如何從父範圍檢查包含ng的表單的有效性？

我有一個在我的應用程序的多個視圖之間共享的子窗體。在一個視圖中，該子窗體單獨顯示，底部有一個後退/繼續按鈕，可將用戶引導至下一個子窗體。在另一個視圖中，子窗體與其他子窗體（基本上是一個長窗體）顯示在同一頁面上。如何從父範圍檢查包含ng的表單的有效性？

由於子窗體的HTML是在兩個視圖中100％相同，我分離成部分和正在使用ng-include上呈現。在僅顯示帶有後退/繼續按鈕的子窗體的視圖中，我在父項的HTML內呈現後退/繼續按鈕。

在視覺上，一切工作正常，我能夠訪問所有形式（user.email, user.password, user.etc...）輸入的數據。

問題是，基於用戶是否已正確完成表單，啓用/禁用「繼續」按鈕，並且這在「僅子類型」變體中不起作用，因爲父範圍不會似乎無法訪問表單的狀態。如果我堅持在部分的按鈕，它的工作原理，但我不想這樣做，因爲按鈕不能在每種情況下，這部分正在使用屬於那裏。直到事情是在框和類型在我的例子

JSFiddle Example

看到紅色邊框內的提交按鈕是無效的「表格無效？」值更新，而藍色邊框內的按鈕始終處於啓用狀態，「表單無效？」值爲空白。

如何從父範圍內訪問的myForm.$invalid價值？

來源

2013-04-04 Michael Moussa

表單可以嵌套在角度中，並且子表單變爲無效應使父表單無效。但你似乎沒有一個外在形式圍繞你的ng-included形式... – jpsimons 2013-04-05 03:08:18

嵌套

如果它是一個子表單，你可以只從子窗體移動窗體標籤，進入主窗體：updated JSFiddle

你也可以使用ngForm-directive巢您的形式：

可以嵌套角度形式。這意味着，當所有子表單都有效時，外部表單也是有效的。但是，瀏覽器不允許嵌套元素，因爲這個原因，angular提供了ngForm別名，其行爲相同但允許表單嵌套。

結果是有點亂海事組織。我寧願創建「myForm'-指令以新的範疇，以避免使用$父 - 是這樣的：

myApp.directive('myForm',function(){ 
    return{ 
     restrict:'E', 
     scope:{model:'='}, 
     templateUrl:'/form.html', 
     replace:true 
    } 
});

- 看到當您使用創建此JSFiddle example

來源

2013-04-09 09:16:56 joakimbl

第一個選項對我來說不起作用，因爲它是一個多頁表單，每個「子表單」需要獨立驗證。但是，在屬性表單中嵌套'ng-form'指令（而不是嵌套實際的''標籤）完美地工作！ '$ parent'部分只是一個不好的例子 - 我有一個綁定的實際對象。下面是我將要使用的完整解決方案的一個更好的例子：[JSFiddle]（http://jsfiddle.net/BLVcG/2/）。謝謝！ – 2013-04-09 14:29:23

啊哈...但是如果你的窗體是在模態對話框裏面而你不能有外部窗體呢？ – 2013-08-21 19:46:15

我認爲這是Angular的一個真正弱點。他們將驗證放在表單元素上，而不是模型上。所以如果你想爲同一個模型定義多個表單，你必須重複所有的驗證邏輯。 – 2013-08-21 19:54:28

子範圍NG-包括爲隱藏父窗體函數。

除了使用一個指令，你還可以在父添加對象，但對錶單的名稱，象這樣一個屬性設置爲一個對象是很重要的：

<form name="myFormHolder.myForm">

，並在父控制器

$scope.myFormHolder = {};

然後下面應該工作：

$scope.myFormHolder.myForm.$pristine

這樣，當個e表單被評估，myForm。$ valid將被設置在父級上。我相信我問了同樣的問題：Why form undefined inside ng-include when checking $pristine or $setDirty()?

來源

2014-05-16 17:32:43

這似乎更像是可以接受的答案。非常有幫助謝謝！ – gabereal 2015-07-23 20:18:46

這解決了我的問題。我通過連接到ng-repeat的指令填充了html模板，每個模板都是主要的子範圍。這是驗證顯示的一個很好的解決方案。 – mortey 2015-12-09 20:52:38

這是非常乾淨的方式來做到這一點。 – Skrew 2017-05-23 15:57:19

如何從父範圍檢查包含ng的表單的有效性？

回答

相關問題