如何驗證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>