Question

请参阅我的代码段。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-file-upload">
  <div class="form-file-upload-inner">
    <label for="FileOne"><span>Select Image</span>
    </label><span class="wpcf7-form-control-wrap FileOne"><input type="file" name="FileOne" size="40" class="wpcf7-form-control wpcf7-file" id="FileOne" aria-invalid="false" /></span>
    <button class="close" type="button"></button>
  </div>
</div>

尝试添加3-4个长度大于50的电话号码。然后尝试使用删除按钮删除第一个phonenumber。现在看看我的问题，即删除最后一个电话号码验证。请帮帮我。

Answer 1

请在下方使用。我把ng-form放在ng-repeat中，索引从文本域名和验证显示中删除。

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

在拼接ng-repeat数组项上删除了表单错误

1 个答案: