Wie validiere ich das dynamische Feld auf Angular JS?

Question

Ich bin neu zu kantig und gerade im Lernprozess. Ich versuche, an einem kleinen Projekt zu arbeiten, mit dem ich ein Problem habe. Ich füge die Zeilen dynamisch hinzu. Und wenn ich validiere, validiert es alle vorherigen Indizes dieser Eingabe, die Daten enthält und sich im richtigen Format zusammen mit dem aktuellen leeren Feld befindet. Meine Frage hier ist, wie validiere ich die Zeile basierend auf Index, wenn die Zeile dynamisch hinzugefügt wird.

HTML-Code: Der folgende Code hat drei Eingabefelder, die erforderlich sind und klicken Sie auf die Schaltfläche, das Hinzufügen von Zeilen und das Entfernen von Zeilen.

<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: Der Javascript-Code der Kontaktperson erfolgt hier hinzufügen und entfernen.

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

Answer 1

Verwenden {{}} Interpolation, wenn dieses $ Index mit für die Benennung dynamische Steuerung Versuchen Sie es für mich funktioniert:

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