AngularJS表單驗證未顯示

Question

我無法使用以下AngularJS表單驗證代碼填充錯誤消息。它是一個嵌套循環，我試圖驗證包含問題的下拉框以及相應的答案可以驗證。下面是一個代碼示例：

HTML

<form name="frm" ng-controller="Contract" novalidate> 
<div> 
    <div ng-repeat="variable in randomQuestionList"> 
     <div ng-repeat="(key, pair) in variable"> 
      <select style="width:450px" ng-model="selected" ng-options="var.questionDes for var in pair"/>  
      <option value=""> Choose a question</option> 
      </select> 
     </div> 

     <label for="Answer" >Answer: </label> 
     <input type="text" name="answer{{$index}}" ng-model="answers[$index]" ng-maxlength="50" required></input><br> 
     <div ng-show="frm.answer{{$index}}.$dirty && frm.answer{{$index}}.$invalid"> 
     <span ng-show="frm.answer{{$index}}.$error.required"> Answer is a mandatory field. Please enter the answer </span> 
     <span ng-show="frm.answer{{$index}}.$error.maxlength"> Maximum 50 characters are allowed </span> 
     </div> 

    </div> 
</div> 
</form> 

JS

app.controller('Contract', ['$scope', function($scope) { 

     $scope.answers = []; 
    $scope.randomQuestionList = 
    [ 
     { 
     "questionList": 
     [ 
      { 
       "questionDes": "What is the first name of the person you first kissed?", 
      }, 
      { 
       "questionDes": "Where were you when you had your first kiss?", 
      } 
     ] 
     }, 
     { 
     "questionList": 
     [ 
      { 
       "questionDes": "What was the name of your elementary/primary school?", 
      }, 
      { 
        "questionDes": "What was your favorite place to visit as a child?", 
       } 
      ] 
      } 
     ]; 
    }]); 

Answer 1

這是我的方法，當我遇到了類似的情況。我使用子窗體來分隔範圍。看看這是否適合你。

<form name="frm" ng-controller="Contract" novalidate> 
<div> 
    <div ng-repeat="variable in randomQuestionList"> 
     <div ng-repeat="(key, pair) in variable"> 
      <select style="width:450px" ng-model="selected" ng-options="var.questionDes for var in pair">  
      <option value=""> Choose a question</option> 
      </select> 
     </div> 

     <ng-form name="frmChild"> 
     <label for="Answer" >Answer: </label> 
     <input type="text" name="answer1" ng-model="answers[$index]" ng-maxlength="2" required><br> 
     <span ng-show="frmChild.answer1.$dirty && frmChild.answer1.$invalid"> 
      <span ng-show="frmChild.answer1.$error.required"> Answer is a mandatory field. Please enter the answer </span> 
      <span ng-show="frmChild.answer1.$error.maxlength"> Maximum 50 characters are allowed </span> 
     </span> 
     </ng-form> 
    </div> 
</div> 
</form> 

工作演示here