Form error removed on splicing ng-repeat array item

Question

Please see my code snippet.

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

try adding 3-4 phone numbers having length greater than 50. Then try removing first phonenumber using delete button. Now see my issue , That is last phone numbers validation is removed. Please help me.

Paulson Peter · Accepted Answer · 2016-12-06 07:03:27Z

1

Use below. I put ng-form inside ng-repeat and index is removed from textfield name and validation display.

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

answered Dec 6, 2016 at 7:03

Paulson Peter

5744 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nikhil Mohanan Over a year ago

Thanks for the Answer.But this solution will output multiple forms and input fields with same name.right??

Paulson Peter Over a year ago

Yes, with same name but each form will be treated as different. You can use $scope.items to get value from each field. ngForm is designed to use for nesting purposes like your requirement.

Nikhil Mohanan Over a year ago

Thanks for the answer.

Collectives™ on Stack Overflow

Form error removed on splicing ng-repeat array item

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related