Formularfehler beim Spleißen entfernt ng-repeat array item

Bitte beachten Sie mein Code-Snippet.Formularfehler beim Spleißen entfernt ng-repeat array item

<!DOCTYPE html> 
 
<html data-ng-app="myApp"> 
 

 
<head> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
</head> 
 

 
<body data-ng-controller="testController"> 
 
    <ng-form name="phoneInnerForm"> 
 
    <div> 
 

 
     <div class="form-group" data-ng-repeat="item in items" ng-class="phoneInnerForm.phones{{$index}}.$error.maxlength ? 'phone_number_error': ''"> 
 
     <input type="text" class="form-control" id="InputAddPhone" name="phones{{$index}}" ng-model="item.number" ng-maxlength="50"> 
 
     <select class="form-control" ng-model="item.type"> 
 
      <option value=""></option> 
 
      <option value="mobile">Mobile</option> 
 
      <option value="work">Work</option> 
 
      <option value="home">Home</option> 
 
      <option value="fax">Fax</option> 
 
      <option value="other">Other</option> 
 
     </select> 
 

 
     <div class="evy_email_dltbtn"> 
 
      <button type="button" class="btn btn-default btn_delete" ng-click="deleteItem($index);" title="Delete">Delete</button> 
 
      <button ng-show="$last" type="button" class="btn btn-default btn_delete" ng-click="addItem();" title="Delete">Add</button> 
 
     </div> 
 
     <span ng-show="phoneInnerForm.phones{{$index}}.$error.maxlength" class="evy_user-preference_error">Phone number should not exceed 50 characters</span> 
 
     </div> 
 

 
    </div> 
 
    </ng-form> 
 
    <script> 
 
    angular 
 
     .module('myApp', []) 
 
     .controller('testController', ['$scope', 
 
     function($scope) { 
 

 
      $scope.items = [{ 
 
      number: "", 
 
      type: "" 
 
      }]; 
 

 
      $scope.addItem = function() { 
 
      $scope.items.push({ 
 
       number: "", 
 
       type: "" 
 
      }); 
 
      } 
 

 
      $scope.deleteItem = function(index) { 
 
      $scope.items.splice(index, 1); 
 
      } 
 

 
     } 
 
     ]); 
 
    </script> 
 
</body> 
 

 
</html>

Versuchen Sie, 3-4 Telefonnummern Länge von mehr als 50 Dann erste Telefonnummer versuchen Entfernen-Taste löschen. Jetzt sehe mein Problem, dass die letzte Telefonnummern Validierung entfernt wurde. Bitte helfen Sie mir.

Quelle

2016-12-06 Lihkin Vettiyara

Verwenden Sie unten. Ich füge ng-Form in ng-repeat ein und der Index wird aus dem Textfeldname und der Validierungsanzeige entfernt.

<!DOCTYPE html> 
 
<html data-ng-app="myApp"> 
 

 
<head> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
</head> 
 

 
<body data-ng-controller="testController"> 
 
    
 
    <div> 
 

 
     <div class="form-group" data-ng-repeat="item in items" ng-class="phoneInnerForm.phones{{$index}}.$error.maxlength ? 'phone_number_error': ''"> 
 
     <ng-form name="phoneInnerForm"> 
 
     <input type="text" class="form-control" id="InputAddPhone" name="phones" ng-model="item.number" ng-maxlength="50"> 
 
     <select class="form-control" ng-model="item.type"> 
 
      <option value=""></option> 
 
      <option value="mobile">Mobile</option> 
 
      <option value="work">Work</option> 
 
      <option value="home">Home</option> 
 
      <option value="fax">Fax</option> 
 
      <option value="other">Other</option> 
 
     </select> 
 

 
     <div class="evy_email_dltbtn"> 
 
      <button type="button" class="btn btn-default btn_delete" ng-click="deleteItem($index);" title="Delete">Delete</button> 
 
      <button ng-show="$last" type="button" class="btn btn-default btn_delete" ng-click="addItem();" title="Delete">Add</button> 
 
     </div> 
 
     <span ng-show="phoneInnerForm.phones.$error.maxlength" class="evy_user-preference_error">Phone number should not exceed 50 characters</span> 
 
     </ng-form> 
 
     </div> 
 

 
    </div> 
 
    
 
    <script> 
 
    angular 
 
     .module('myApp', []) 
 
     .controller('testController', ['$scope', 
 
     function($scope) { 
 

 
      $scope.items = [{ 
 
      number: "", 
 
      type: "" 
 
      }]; 
 

 
      $scope.addItem = function() { 
 
      $scope.items.push({ 
 
       number: "", 
 
       type: "" 
 
      }); 
 
      } 
 

 
      $scope.deleteItem = function(index) { 
 
      $scope.items.splice(index, 1); 
 
      } 
 

 
     } 
 
     ]); 
 
    </script> 
 
</body> 
 

 
</html>

Quelle

2016-12-06 07:03:27

Danke für die Answer.But diese Lösung ausgibt mehrere Formulare und Eingabefelder mit gleichen name.right ?? –

Ja, mit dem gleichen Namen, aber jedes Formular wird als unterschiedlich behandelt. Sie können $ scope.items verwenden, um Werte für jedes Feld zu erhalten. ngForm wurde entwickelt, um zu verschachteln wie Ihre Anforderung. –

Dies ist für mich funktioniert. Wird dies verbessert. –

Formularfehler beim Spleißen entfernt ng-repeat array item

Antwort

Verwandte Themen