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>

我想单击Next按钮来仅触发可见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-需要=＆＃34;当前页== 1＆＃34; 和的需要NG-=＆＃34;当前页== 2＆＃34;

ng-required 的作用与 ng-show 相同。因此，当 currentpage == 1 为真时，第1个div中的字段具有ng-required =＆＃34; true＆＃34;，而第二个div中的字段具有ng-required =＆＃ 34;假＆＃34 ;.

同样，点击下一步，当 currentpage == 2 时，第二个div中的字段变为必需，因为ng-required =＆＃34; true＆＃34;，而对于字段in第一个div，ng-required =＆＃34; false＆＃34;。

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>

仅验证AngularJS中的可见控件

3 个答案: