仅验证AngularJS中的可见控件

Question

我是AngularJS的新手,也许我会以错误的方式解决这个问题,但是我在验证表单方面遇到了问题.

我有一个包含多个DIV的表单.每个DIV代表表单流中的页面.我有一个单一的下一步按钮,将用户带到下一页(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.

谢谢!

Answer 1

还可以将ng-required的值设置为对条件提交/显示保持为真的值.因此,验证在不可见时通过.

然后在提交时,可以从$ scope表单对象中删除不需要的字段.为了使其更清晰和更易于维护,可以使阵列保持给定条件的备用必需/非必需属性集.

这样就可以用一种形式.

Answer 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为真时,第1个div中的字段具有ng-required ="true",而第二个div中的字段具有ng-required ="false".

类似地,当单击next时,当currentpage == 2时,第二个div中的字段变为必需,因为ng-required ="true",而对于1st div中的字段,ng-required ="false".

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