I am currently working on a project that utilizes ASP.NET MVC 5 on the server side. As outlined in this particular post, my form on the server side is designed to accept an array of objects as a parameter. This requires me to structure the name attributes within my view in the following manner.
QualificationList[0].Degree
QualificationList[0].Institute
QualificationList[1].Degree
QualificationList[1].Institute
QualificationList[2].Degree
QualificationList[2].Institute
.
.
.
.
QualificationList[n].Degree
QualificationList[n].Institute
It's important to note that this isn't a duplicated query, as I have already tried numerous solutions from sources like StackOverflow and others. The complexity lies in the fact that the value of n isn't fixed. By utilizing ng-repeat, I can successfully render it as follows.
<div ng-form="myForm" class="form-group" ng-repeat="q in QualificationList">
<div class="col-md-9">
<input class="form-control text-box single-line" ng-model="QualificationList[$index].Degree" ng-required="true" name="QualificationList[{{$index}}].Degree" type="text" value="" />
<span ng-show="QualificationList[$index].Degree.$invalid">The Degree field is required</span>
</div>
<div class="col-md-3">
<input class="form-control text-box single-line" ng-model="QualificationList[$index].Institute" ng-required="true" name="QualificationList[{{$index}}].Institute" type="text" value="" />
<span ng-show="QualificationList[$index].Institute.$invalid">The Institute field is required</span>
</div>
</div>
As demonstrated above, my goal is to validate the user-entered values for both Degree and Institute. I have also experimented with this proposed solution, but it did not yield the desired results.
How can I showcase validation errors? It's essential to acknowledge that for simplicity, I'm focusing solely on two fields here - namely Degree and Institute. However, within my actual project, there are over 20 fields that require varying forms of validations (such as ng-pattern, email, etc.)
To keep things straightforward, I've created a fiddle which you can access here: http://jsfiddle.net/wa5y5L15/29/