仅验证 AngularJS 中的可见控件答案

【问题标题】：Validate only visible controls in AngularJS仅验证 AngularJS 中的可见控件
【发布时间】：2013-01-22 16:22:11
【问题描述】：

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

我有一个包含多个 DIV 的表单。每个 DIV 代表表单流中的一个页面。我有一个 Next-button 可以将用户带到下一页 (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 控件上触发表单验证，而不是在隐藏控件上触发表单验证。根据可见控件的验证状态禁用下一步按钮是完美的。但是怎么做？我非常想避免在我的控制器中使用 JQuery。

谢谢！

【问题讨论】：

标签： validation angularjs

【解决方案1】：

也可以将 ng-required 的值设置为适用于条件提交/显示的值。所以验证在不可见时通过。

然后在提交时，可以从 $scope 表单对象中删除不需要的字段。为了使其更简洁、更易于维护，可以让数组保存给定条件的一组备用/非必需属性。

这种方式可以只用一种形式。

【讨论】：

现在 ng-required 可用，这是迄今为止最好的解决方案。

【解决方案2】：

 <!DOCTYPE html>
 <html ng-app="myapp">
 <body>
  <form name="myForm" data-ng-controller="formController" novalidate> 
    <div ng-show="currentpage==1">
       Page1<input type="text" ng-model="page1" ng-required="currentpage==1"/>
     </div>
    <div ng-show="currentpage=='2'">
        Page2<input type="text" ng-model="page2" ng-required="currentpage==2"/>
    </div>
  <input ng-disabled="myForm.$invalid" type="submit" value="NEXT" ng-click="next()"/>
</form>
</body>
</html>

试试这个。

注意：

ng-required="currentpage==1" 和 ng-required="currentpage==2"

ng-required 与 ng-show 的作用相同。因此，当 currentpage==1 为 true 时，第一个 div 中的字段为 ng-required="true"，而第二个 div 中的字段为 ng-required="false"。

同样，在点击下一步时，当 currentpage==2 时，第二个 div 中的字段成为必填字段，因为 ng-required="true"，而对于第一个 div 中的字段，ng -required="false"。

【讨论】：

【解决方案3】：

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

您可能应该将它们中的每一个都放在一个单独的表单中。因为听起来您已经根据当前页面的内容进行了某种条件提交，这将变得难以维护。

以下是您的两个表单中的每一个的表单验证示例。在此示例中，如果您真的希望它采用相同的方法，每个表单仍然会提交到相同的方法，但我建议让它们提交到自己的方法，而不是将所有内容都硬塞到 switch 语句中。在某些情况下，我什至可以为每个表单赋予它们自己的控制器。

<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>

【讨论】：

你是对的。这是迄今为止最简单的。我想我想避免重复下一个按钮。根据可见页面，我的流程中有 4 个页面，其中有不同的按钮。感谢您的时间和帮助。