angularjs - validation inside ng-repeat for arrayed name attributes

Question

I am working on a project that uses ASP.NET MVC 5 at server side. As mentioned in this post, my form at server side accepts an array of object as a parameter. Therefore, I need to generate the name attributes in my view like this.

QualificationList[0].Degree
QualificationList[0].Institute
QualificationList[1].Degree
QualificationList[1].Institute
QualificationList[2].Degree
QualificationList[2].Institute
.
.
.
.
QualificationList[n].Degree
QualificationList[n].Institute

Please note that this is not a duplicated question since I tried almost all solutions from StackOverflow and other websites. This case is a bit different (and complex, too). Here n is not a fixed value. Using ng-repeat this is how I render it and that works fine.

<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>

And as show above, I want to validate the values entered (for Degree and Institute) by the user. I tried this solution also but it doesn't work.

What can I do to show validation errors? Please note that to reduce the complexity, I'm mentioning only two fields here, namely Degree and Institute. In my live project there're 20+ fields those need different kinds of validations (like ng-pattern, email etc.)

For simplicity, I have created a fiddle here: http://jsfiddle.net/wa5y5L15/29/

Answer 1

You are using a ngForm on each list item which is correct for individual validation but you can't name and reference the inputs like that.

Since the scope of each ngForm is isolated just use a simple name like Degree or Institute (and don't forget to prefix it with the form's name in the ng-show expression):

<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="Degree" type="text" value="" />
         <span ng-show="myForm.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="Institute" type="text" value="" />
          <span ng-show="myForm.Institute.$invalid">The Institute field is required</span>
      </div>
</div> 

Btw, here's a good article:

http://scotch.io/tutorials/building-dynamic-angular-forms-with-ngrepeat-and-ngform

EDIT:

Ok, got it. I think you can't use the form model with that. But you can check the properties in the controller scope with a regular expression (and put it in your ngShow). If you just need non-empty string use sth like this:

<div ng-form="myForm" class="form-group" ng-repeat="q in QualificationList">
    <div class="col-md-10 col-xs-10">
        <div class="col-md-6 col-xs-6">
            <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">The Institute field is required</span>
        </div>
        <div class="col-md-6 col-xs-6">
            <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">The Institute field is required</span>
        </div>
    </div>
</div>