2014-10-31 49 views
3

我試圖找到一個簡單的解決方案,以所需的輸入類型的情況。我有多個小表單,只有一個保存在頁面底部。我想要完成的事情就像ngRequired一樣,但是在整個控制器中,不僅僅是單個的形式。因此,所需的效果非常簡單 - 如果任何輸入未填寫 - 將boolean(或某物)設置爲false,禁用底部的保存按鈕。角度,需要檢查多種形式的控制器

所以我的第一次嘗試是這樣的 -

我對每一個所需物品的模型 - 有10個項目

那我也當您嘗試單擊按鈕如何來檢查功能許多人chcked這樣

if($scope.modeltracker1){ 
    //if there is anything inside model 1 add 1 to the tracker 
    $scope.modeltracker += 1; 
} 

,如果計數器不是10,不要做任何事情(所有必需的不填寫)

if($scope.modeltracker != 10){ 
    //do nothing because all required are not filed out 
}else{ 
    //run save, all required all filed out 
} 

所以 - 我覺得應該有比我在這裏第一次嘗試更容易的解決方案。也許是檢查這些必填字段中的任何一個是否爲假,不要開火?我知道ngRequied對於這件事會很好,但不幸的是,這種方式必須進行組織,它不能是一個大的形式。必須有一個更簡單的方法來完成角度的這項任務。

任何輸入將不勝感激,謝謝閱讀!

回答

2

您可以使用ng-form築巢你多種形式。它允許使用嵌套表單和驗證多個表單作爲一種形式。

因此,您需要將多個表單嵌套在一個根表單中。

<div ng-controller="demoController"> 
    <form name="parentForm"> 
    <ng-form name="firstForm"> 
     <input type="text" ng-model="firstModel" required> 
    </ng-form> 
    <ng-form name="secondForm"> 
     <input type="text" ng-model="secondModel" required> 
    </ng-form> 
    </form> 
</div> 

然後,您需要做的就是檢查父窗體的驗證狀態。

angular.module('formDemo', []) 
.controller('demoController', ['$scope', function($scope) { 

if($scope.parentForm.$valid) { 
    //run save, all required all filed out 
} else { 
    //do nothing because all required are not filed out 
} 
}]);