如何验证Angular JS上的动态字段？

Question

我是新来的角，只是在学习过程中。我正在尝试处理一些我遇到问题的小项目。 我动态添加行。当我验证它时，验证此输入中的所有以前的索引，它们都有数据，并且与当前的空字段一起，格式正确。我的问题是，如果行是动态添加的，我如何根据索引验证行。

HTML代码： 下面的代码有三个必需的输入字段，点击按钮，添加行和删除行。

<form class="form-horizontal" role="form" method="post" ng-submit="createReferralCateogry()"> 
      <div class="form-group" ng-repeat="contactPerson in referral.contactPersons track by $index"> 
        <div class="contactPerson"> 
         <div class="col-sm-4 col-md-3"> 
          <label for="contactperson ">Contact Person Name:</label> 
          <input type="text " class="form-control " ng-model="referral.contactPersons[$index].personName " name="ConPersonName[$index]" placeholder="Contact Person" required> 
          <div class="validationmsg " ng-messages="addReferralForm.ConPersonName[$index].$error " ng-if="addReferralForm.ConPersonName[$index].$touched " role="alert "> 
           <div ng-message="required ">Please Enter Contact Person's Name</div> 
          </div> 
         </div> 
         <div class="col-sm-4 col-md-3"> 
          <label for="contactperson ">Contact Person Designation:</label> 
          <input type="text " class="form-control " ng-model="referral.contactPersons[$index].designation " name="ConPersonDesig[$index]" placeholder="Designation " required> 
          <div class="validationmsg " ng-messages="addReferralForm.ConPersonDesig[$index].$error " ng-if="addReferralForm.ConPersonDesig[$index].$touched " role="alert "> 
           <div ng-message="required ">Please Enter Contact Person's Designation</div> 
          </div> 
         </div> 
         <div class="col-sm-3 col-md-3"> 
          <label for="contactperson]">Contact Person Mobile Number:</label> 
          <input type="number " class="form-control " ng-model="referral.contactPersons[$index].mobileNumber" ng-minlength="10 " ng-maxlength="12 " name="ConPersonPH[$index]" placeholder="Mobile Number " required> 
          <div class="validationmsg " ng-messages="addReferralForm.ConPersonPH[$index].$error " ng-if="addReferralForm.ConPersonPH[$index].$touched " role="alert "> 
           <div ng-message="required ">Please Enter Contact Person's Mobile Number</div> 
           <div ng-message="minlength ">Your Mobile Number is too short</div> 
           <div ng-message="maxlength ">Your Mobile Number is too long</div> 
          </div> 
         </div> 
         <div class="col-sm-1 mtop25"> 
          <label class="control-label"></label> 
          <button type="button" class="btn btn-primary glyphicon glyphicon-plus glyph_size addContactPerson " ng-class="$index==0? 'btn-primary glyphicon glyphicon-plus': 'btn-warning glyphicon glyphicon-minus' " aria-hidden="true " ng-click="addRemoveContactPerson($index) "></button> 
         </div> 
        </div> 
       </div> 
</form> 

JS： 的JavaScript代码来添加和删除contactperson都是在这里完成。

$scope.addRemoveContactPerson = function(index) { 
     if (index == 0) $scope.referral.contactPersons.push({ 
      personName: "", 
      designation: "", 
      mobileNumber: "" 
     }) 
     else { 
      $scope.referral.contactPersons.pop(); 
     } 
    }; 

Answer 1

使用{{}}使用$指数命名的动态控制试试这个工作对我来说，当插值：

<input type="text " class="form-control" ng-model="referral.contactPersons[$index].personName " name="{{'ConPersonName_'+$index}}" placeholder="Contact Person" required> 
         <div class="validationmsg " ng-messages="addReferralForm['ConPersonName_'+$index].$error " ng-if="addReferralForm['ConPersonName_'+$index].$touched " role="alert "> 
          <div ng-message="required ">Please Enter Contact Person's Name</div> 
         </div>