I am struggling to display error messages using the AngularJS form validation code below. It involves a nested loop where I attempt to validate a dropdown box with questions and their corresponding answers. Here is a snippet of the code:
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?",
}
]
}
];
}]);