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>

我想单击 Next 按钮以仅在可见的 DIV 控件上触发表单验证，而不是在隐藏的控件上触发表单验证。根据可见控件的验证状态禁用 Next 按钮是完美的。但是怎么做？我非常想避免在我的控制器中使用 JQuery。

谢谢！

4

3 回答 3

14

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

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

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

于 2013-06-30T14:56:43.477 回答
9 
 <!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为真时，第一个 div 中的字段为 ng-required="true"，而第二个 div 中的字段为 ng-required="false"。

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

于 2014-06-26T20:52:15.920 回答
3

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

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

这是您的两个表单中的每一个的表单验证示例。在此示例中，如果您真的希望它采用相同的方法，每个表单仍会提交到相同的方法，但我建议让它们提交到自己的方法，而不是将所有内容都硬塞到 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>
于 2013-01-22T16:33:49.547 回答