使用 Angular ng-repeat 的表单有效性

Form validity using Angular ng-repeat

本文关键字：表单 有效性 ng-repeat Angular 使用      更新时间：2023-09-26

我有一个 Angular 表单，它正在解析一些JSON数据。
我正在使用ng-repeat渲染.但是，我遇到了一个问题，即当选择每个组中的radio button时，表单永远不会有效。

我怀疑问题出在每个输入中的ng-model，但我似乎无法找出在ng-repeat内动态创建ng-model的正确方法。

表单块代码：

<form name="posttestForm">
  <alert ng-repeat="alert in alerts" 
         type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
  <div class="well question-well" ng-repeat="question in questions">
    <p>
      <strong>{{question.question}}</strong>
    </p>
    <ul>
      <li ng-repeat="answerswers in question.answers">
        <input ng-model="Q[question.id]" 
               type="radio" name="Q{{question.id}}" value="{{answers.id}}" 
               required="" data-key="{{answers.isCorrect}}" />{{answers.answer}}
      </li>
    </ul>
  </div>
  <button type="submit" class="btn btn-primary" ng-click="EvaluatePosttest(3)" 
          ng-show="!TestPassed">
    Submit Questions</button>
</form>

下面是一个 Plunkr，它显示了动态代码，并演示了当选择每个组中的单选按钮时，表单永远不会变为有效。

http://plnkr.co/edit/HQGPIOCdn3TGlE96CpK5?p=preview

这是一个使用静态内容的 Plunkr 显示它的工作。

http://plnkr.co/edit/ZFt2VnBfaQjuu73kaNQJ?p=preview

只需将其添加到您的JavaScript控制器中即可 

$scope.Q = [undefined,undefined,undefined,undefined,undefined,undefined];

解释：您将ng模型设置为Q[question.id]，但Q未定义，因此ng模型将永远不起作用。始终必须在控制器中初始化变量。它工作不初始化的唯一情况是当你这样做时： ng-model="test"

如果你这样做 

ng-model="test.test"
ng-model="test[0]"

如果未正确初始化，它将永远无法工作。

您可以在控制器中执行自定义表单验证。在您的情况下：

$scope.Q = [];
$scope.$watch('Q', function (Q) {
    $scope.posttestForm.$setValidity('count', Q.length >= $scope.questions.length);
}, true);

在其中，您可以执行任何所需的验证。

这是工作的 plunkr：http://plnkr.co/edit/7Ww4fjJzkDjifPaZ2QtG?p=preview

相关文章：