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>并且它显示为true，如果我将其更改为有效则返回false。所以看起来这有点工作，除了我不能让我的用户进入下一页。

目前使用此代码，即使填写了必填字段，该按钮也不会转到下一步。请帮助。

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

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

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。我还注意到你的表单上没有任何错误。你也应该删除它。

一步一步的Angular JS验证无效

1 个答案: