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

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.在提交时,脚本从打开的表单中删除'open'类,循环到enxt表单并在该表单上添加open类.

如何设置它以便可以单独验证这些表单中的每一个？

提前致谢.

Answer 1

你需要ngForm指令和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上查看文档和这篇文章.