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

Question

我正在构建一个带有两步表单的 Angular JS 应用程序。它实际上只是一个表单，但使用 JavaScript 隐藏第一个面板并在用户单击“下一步”按钮并继续执行步骤 2 时显示第二个面板。我在步骤 1 中的某些字段上设置了“必需”验证，但显然，当用户单击“下一步”按钮时，它们不会得到验证......当在第 2 步结束时单击“提交”按钮时，它们会得到验证。

当单击“下一步”按钮时，有什么方法可以告诉 Angular 验证表单中的这些字段？

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>