在同一頁面上設置多個表單/驗證

Question

這是怎麼回事，總的AngularJS noob在這裏，尋找一些答案。

我有一個頁面設置像這樣：

<form name="mainForm" class="content" ng-app="pathForm" ng-controller="FormControl" novalidate> 

    <div class="full-page open" id="form1"> 
    <!-- Form 1 content here --> 
    </div> 

    <div class="full-page" id="form2"> 
    <!-- Form 2 content here --> 
    </div> 

    <div class="full-page" id="form3"> 
    <!-- Form 3 content here --> 
    </div> 

    <div class="full-page" id="form4"> 
    <!-- Form 4 content here --> 
    </div> 

</form> 

其中每一種形式都有自己的一套需要驗證輸入。我已經能夠驗證所有四種形式的驗證，因爲我設置了一個涵蓋所有4種形式的包含ng-app表單。提交時，腳本會從打開的窗體中刪除「打開」類，循環到enxt窗體並在窗體上添加打開的類。

我怎樣才能設置它，使每個這些形式可以單獨驗證？

在此先感謝。

Answer 1

您需要ngForm directive和FormController。

在此指令中帶有名稱的每個ng-form指令都將屬性添加到$scope。你可以通過點擊提交按鈕來訪問這個屬性（它是FormController的實例）。

此對象中有一些屬性和方法。您需要物業$valid（或$invalid）才能獲取表單的驗證狀態。

HTML：

<ng-form name="form1"></ng-form> 
<ng-form name="form2"></ng-form> 
<button ng-click="submit();">Submit</button> 

JS：

$scope.submit = function() { 
    if ($scope.form1.$valid && $scope.form2.$valid) {} 
} 

自定義驗證 如果內置的驗證不足夠多，你可以添加自己的自定義驗證。

請參閱so.com上的docs和this post。