Angular JSのダイナミックフィールドを検証するにはどうすればよいですか？

Question

私は角度のついていないばかりでなく、学習の過程で新しいです。私は問題があるマイナーなプロジェクトに取り組んでいます。 行を動的に追加します。私が検証すると、データを持ち、現在の空のフィールドと共に適切なフォーマットになっているこの入力の以前のすべてのインデックスが検証されます。ここで私の質問は、行が動的に追加された場合、インデックスに基づいて行を検証する方法です。

HTMLコード： 以下のコードには、ボタンが必要な3つの入力フィールドと、行の追加と行の削除があります。

<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： contactpersonを追加および削除するにはjavascriptのコードがここで行われています。

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