在同一页面上设置多个表单/验证

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。