Angular JS:在提交之前validation表单域

我正在构build一个两步forms的Angular JS应用程序。 这实际上只是一种forms,但是使用JavaScript来隐藏第一个面板,并在用户点击“下一个”button时显示第二个面板,并转到第2步。我已经在第1步的某些字段上设置了“必需”validation,但显然,当用户点击“下一个”button时,他们不会被validation。当在步骤2结束时单击“提交”button时,他们将得到validation。

有没有什么办法可以告诉棱angular来validation单击“下一步”button时窗体中的字段?

我build议使用子表单。 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>