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

【问题标题】：Form validity using Angular ng-repeat使用 Angular ng-repeat 的表单有效性
【发布时间】：2016-02-05 17:15:06
【问题描述】：

我有一个 Angular 表单正在解析一些 JSON 数据。
我正在使用ng-repeat 进行渲染。但是，我有一个问题，因为选择了每个组中的radio button 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="answers 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 angularjs angularjs-ng-repeat angular-ngmodel angularjs-ng-model

【解决方案1】：

只需将其添加到您的 javascript 控制器中

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

说明：您将 ng-model 设置为 Q[question.id] 但 Q 未定义，因此 ng-model 将永远无法工作。您始终必须在控制器中初始化变量。唯一没有初始化的情况是当你这样做时： ng-model="测试"

如果你这样做了

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

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

【讨论】：

【解决方案2】：

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

$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

【讨论】：