validation - 仅验证 AngularJS 中的可见控件

Question

我是 AngularJS 的新手，也许我的做法是错误的，但是我在验证表单时遇到了问题。

我有一个包含多个 DIV 的表单。每个 DIV 代表表单流中的一个页面。我有一个 Next 按钮可以将用户带到下一页 (DIV)。

页面基于 $scope 中的“currentpage”字段显示，例如

<form> 
    <div ng-show="currentpage == 1">
        <input type="text" required />
    </div>
    <div ng-show="currentpage == 2">
        <input type="text" required />
    </div>
    <button ng-disabled="??" ng-click="next()" />
</form>

我想单击“下一步”按钮以仅在可见的 DIV 控件上触发表单验证，而不是隐藏的控件。根据可见控件的验证状态禁用下一步按钮是完美的。但是如何？我非常想避免在我的 Controller 中使用 JQuery。

谢谢!

Answer 1

在我看来，如果您可以在提交时将其中一个设置为 null 或为空，那么它并不是真正的“必需”，是吗？

您可能应该将其中的每一个都放在单独的形式中。因为听起来您已经根据当前页面的内容进行了某种有条件的提交，维护起来会很麻烦。

以下是两个表单中每一个的表单验证示例。在这个例子中，如果你真的想要这样的话，每个表单仍然提交给相同的方法，但我建议让它们提交给他们自己的方法，而不是把所有东西都硬塞到一个 switch 语句中。在某些情况下，我什至可能会为每个表单提供自己的 Controller 。

<form> 
    <div ng-show="currentpage == 1">
        <form name="page1Form" ng-submit="next(currentPage)">
           <input type="text" name="item1" ng-model="item1" required />
           <span ng-show="page1Form.item1.$dirty && page1Form.item1.$error.required">required</span>
           <button type="submit" ng-disabled="page1Form.$invalid">Submit</button>
        </form>
    </div>
    <div ng-show="currentpage == 2">
        <form name="page2Form" ng-submit="next(currentPage)">
           <input type="text" name="item2" ng-model="item2" required />
           <span ng-show="page2Form.item2.$dirty && page2Form.item2.$error.required">required</span>
           <button type="submit" ng-disabled="page2Form.$invalid">Submit</button>
        </form>
    </div>
</form>