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

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

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

Answer 1

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