javascript - 一步一步的 Angular JS 验证不起作用

Question

我已经开始进入 Angular JS 验证....

我有这一步:

<step title="Let's begin with some information about your business">
          <form name="myForm" ng-submit="submitForm(myForm.$valid)" novalidate>
          <table>
              <tr>
                  <td><label>Your Name</label></td><td><input class="form-control" type="text" ng-model="user.name" required /></td>
              </tr>
</table>
</form>
</step>

我在步骤之外有这个按钮......在向导之外:

<a class="btn btn-default" ng-click="gotoNextStep()" ng-show="showNextButton()">Next</a>

在我的 js 文件中，我在 ng-click 上调用了这个函数:

   $scope.gotoNextStep = function () {
          if ($scope.currentStepIndex == (3)) {
              $scope.submitForm = function (isValid) {
                  if (isValid) {
                      toggleSteps($scope.currentStepIndex + 1);
                  }
              };
          } else {
              toggleSteps($scope.currentStepIndex + 1);
          }
      }

我想做的是阻止用户进入下一步，直到填写必填字段。

就在我的步骤结​​束之前和表单结束之后，我添加了这个 <p>{{myForm.$invalid}}</p>它看起来是真的，如果我将它更改为有效，它返回 false。所以这似乎有点工作，除了我无法阻止我的用户转到下一页。

目前使用此代码，无论是否填写必填字段，按钮都不会转到下一步。请帮忙。

我还应该注意到 $scope.submitForm 说它未定义 :(

另一个注意事项.. {{myForm.$valid}} 返回 false 但是当我填写必填字段时它返回 true....我将如何在 $scope.gotoNextStep 的 js 文件中使用 myForm.$valid功能

Answer 1

你能在你的按钮中使用 ng-disabled 吗？像这样:

<a ng-disabled="myForm.$pristine || myForm.$invalid" class="btn btn-default" ng-click="gotoNextStep()" ng-show="showNextButton()">Next</a>

然后去掉表单标签中的 ng-submit。我还刚刚注意到您的表格上有 novalidate。你也应该删除它。