Validation 仅验证AngularJS中的可见控件_Validation_Angularjs

Validation 仅验证AngularJS中的可见控件

validation angularjs

Validation 仅验证AngularJS中的可见控件,validation,angularjs,Validation,Angularjs,我是AngularJS的新手，也许我用了错误的方法，但是我在验证表单时遇到了问题我有一个包含多个div的表单。每个DIV表示表单流中的一个页面。我有一个“下一步”按钮，可以让用户进入下一页（DIV）页面基于$scope中的“currentpage”字段显示，例如 <form> <div ng-show="currentpage == 1"> <input type="text" required /> </div&g

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

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

谢谢

在我看来，如果您可以在提交时将其中一个设置为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>


必修的
提交
必修的
提交

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

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

这样，一个人只需要一张表格就可以了。


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

第1页
第2页

试试这个

注意：

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

您是对的。这是迄今为止最简单的。我想我是想避免重复“下一步”按钮。我的流程中有4个页面，根据可见页面的不同，有不同的按钮。感谢您的时间和帮助。现在ng required可用，这是迄今为止最好的解决方案。