Angular JS：在提交之前验证表单字段

Question

我正在用两步表单构建一个Angular JS应用程序。它实际上只是一种形式，但使用JavaScript隐藏第一个面板，并在用户单击“下一步”按钮时显示第二个面板，然后转到步骤2.我已在步骤1的某些字段上设置了“必需”验证，但很明显，他们当用户点击“下一步”按钮没有得到证实......他们得到验证时，“提交”按钮被点击的步骤结束2.

有什么办法，我可以告诉角在单击“下一步”按钮时验证表单中的那些字段？

Answer 1

我建议使用子表单。 AngularJS支持将一个表单放入另一个表单中，并将有效性从低位形式传播到高位;

这里是例子：http://plnkr.co/edit/SruBmlGZZtbwiU8cktAp?p=preview

下面是一些代码，这样可以抓住的想法：

<form name='myform' ng-init="step = 1"> 
    <div ng-show="step==1"> 
     <h3>Step 1: Enter some general info</h3> 
     <div ng-form='step1form'> 
     Name: <input ng-model="name" required> 
     </div> 
     <button ng-disabled="!step1form.$valid" ng-click="step = 2">Next</button> 
    </div> 

    <div ng-show="step==2"> 
     <h3>Step 2: Final info</h3> 
     <div ng-form="step2form"> 
      Phone: <input ng-model="phone" required> 
     </div> 
     <button ng-click="step = 1">Prev</button> 
     <button ng-disabled="!myform.$valid" ng-click="submit()">Submit</button> 
    </div> 
    <div> 
     Validation status: 
     <div> Whole form valid? {{myform.$valid}} </div> 
     <div> Step1 valid? {{step1form.$valid}} </div> 
     <div> Step2 valid? {{step2form.$valid}} </div> 
    </div> 
    </form>