Angular JS验证一步一步不起作用答案

【问题标题】：Angular JS validation step by step is not workingAngular JS验证一步一步不起作用
【发布时间】：2014-06-11 14:30:33
【问题描述】：

我已经开始接触 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....如何在 $scope.gotoNextStep 的 js 文件中使用 myForm.$valid功能

【问题讨论】：

我们需要看更多的代码。你的指令在哪里？ toggleSteps 代码在哪里？
嗨，我把所有的 js 代码都放在这里了：jsfiddle.net/sK79f/1 有点乱，但是 toggleSteps 和我的两个指令都在那里
那个 JSFiddle 没有 HTML。
立即尝试：jsfiddle.net/sK79f/2 我永远无法让 Angular JS 在 JSFiddle 中工作

标签： javascript jquery angularjs validation

【解决方案1】：

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

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

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

【讨论】：