在提交前验证表单字段。

I'm building an Angular JS app with a 2-step form. It's really just one form, but uses JavaScript to hide the first panel and show the second when the user clicks the 'next' button and moves on to step 2. I have set 'required' validations on some of the fields in step 1, but obviously, they do not get validated when the user clicks the 'next' button...they get validated when the 'submit' button is clicked at the end of step 2.

我正在用两步形式构建一个有棱角的JS应用。它实际上只是一个表单，但使用JavaScript隐藏第一个面板，并在用户单击“下一步”按钮并继续执行步骤2时显示第二个面板。我在步骤1中对一些字段设置了“required”验证，但显然，当用户单击“next”按钮时，这些字段不会得到验证……当在步骤2末尾单击“提交”按钮时，它们将得到验证。

Is there any way I can tell angular to validate those fields in the form when the 'next' button is clicked?

当单击“next”按钮时，我是否可以告诉angle在表单中验证这些字段?

1 个解决方案

#1

I suggest to use sub-forms. AngularJS supports putting one form inside another, and validity is propagated form lower form to upper;

我建议使用子表单。AngularJS支持将一个表单放入另一个表单中，有效性从下表单传播到上表单;

Here is example: http://plnkr.co/edit/SruBmlGZZtbwiU8cktAp?p=preview

这是示例:http://plnkr.co/edit/SruBmlGZZtbwiU8cktAp?p=preview

Here is some code so you can grasp the idea:

这里有一些代码，你可以理解这个想法:

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

#1