我正在构建一个两步表单的Angular JS应用。它实际上只是一种形式,但是当用户单击“下一步”按钮并转到步骤2时,使用JavaScript隐藏了第一个面板,并显示第二个面板。我在步骤1中的某些字段上设置了“必需”验证但是很明显,当用户单击“下一步”按钮时,它们不会得到验证…在步骤2的最后单击“提交”按钮时,它们将得到验证。
单击“下一步”按钮时,有什么方法可以告诉angular验证表单中的这些字段?
我建议使用子表单。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>