Angular.js:删除重复行后验证错误未消除 [英] Angular.js: validation error is not removing on deleting a duplicate row

问题描述

duplicate_error 我有一个带有两列用户类型"和用户名"的表，用户类型有一个下拉选择，以便我可以选择预定义的用户类型并在其中放置一个名称用户名.我要添加另一行时，每次点击都有一个添加"按钮.

duplicate_errorI have a table with two column "user type" and "user Name" User type having a drop down selection So that i can select predefined user type and place a name in User name. There is a Add button on each click i am adding one another row.

我在这里进行一次验证，以便用户无法选择重复的用户类型".例如，从第1行开始，我从下拉列表中选择值1".那么从第2行开始，我应该不能选择相同的值.无论如何，此验证工作正常.但是在一种情况下，如果我添加重复的行，然后立即将其删除，由于验证错误仍然存​​在，我仍然无法保存.

I am doing one validation here So that user can't selected repeated "User type". for example from row 1 is i select "value 1" from drop down. then from row 2 i should not be able to select same value. Anyway this validation works fine. but there is one scenario if I add a duplicate row, then remove it right away, I am still unable to save because the validation error is still there.

即使我从删除按钮调用revalidate()函数也不能解决我的问题.

Even i am calling that revalidate() function from delete button it doesn't solved my issue.

我认为这可能是因为revalidate函数会不断设置和重新设置同一模型的有效性，因此模型触发方法调用的有效性将基于最后的比较结果，并且适用于同一行已被删除.

I think it might because the revalidate function keeps setting and re-setting the validity of the same model, so the validity of the model triggering method invocation will be based on the last comparison result and that apply to the same row which row was deleted.

我在这里的疑问是如何与其他删除按钮上的行数据进行验证，这意味着有什么办法可以将整个对象集合作为一个整体传递并重新检查.请帮帮我，因为我不知道如何从这里继续.@CSS-

My doubt here is how to validate row data with other on delete button, means is there any way to pass complete Object collection as a whole and recheck. Please help me out as i have no clue whatsoever how to proceed from here. @CSS-

     input.ng-invalid, select.ng-invalid {
       border-color: #843534;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
      -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
       box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;

}

我的html-

    <div ng-class="{'col-sm-9'}" class="col-md-10">
    <table class="table table-bordered table-striped table-hover table-condensed">
        <thead>
            <th>user type</th>
            <th>user Name</th>
            <th></th>
        </thead>
        <tbody>
            <tr ng-repeat="object in edituserConfig track by $index" ng-form="jobfileForm">
                <td><select class="form-control" ng-model="object.key" required ng-change="reValidateJob()"  name="jobFileKey" ng-init="object.form = jobfileForm">

                        <option style="display:none" value=""></option>
                        <option value="value1">value1t</option>
                        <option value="value2">value2</option>
                        <option value="value3">value3</option>
                        <option value="value4">value4</option>
                        <option value="value5">value5</option>
                </select></td>
                <td><input type="text" class="form-control" name="jobFileName" ng-model="object.value" required/></td>

                <td >
                      <button class="btn btn-danger btn-sm" data-style="zoom-in" ng-click="edituserConfig.splice($index,1)" ng-form="jobfileForm" title="Delete">
                             <span class="glyphicon glyphicon-remove"></span>
                      </button>
               </td>
            </tr>
            <tr>
                <td colspan="3">
                    <button class="btn btn-primary btn-sm" ng-click="edituserConfig.push({'key':'','value':''})"    title="Add Value">
                        <span class="glyphicon glyphicon-plus"></span> Add Value
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
    </div>

我的控制器-

         $scope.reValidateJob = function(){

            angular.forEach($scope.edituserConfig, function(fieldMapO) {
                var count = 0;
                angular.forEach($scope.edituserConfig, function(fieldMapI) {
                    if(fieldMapO.key == fieldMapI.key){
                        count ++;
                    }
                });
                if(count >1){
                    fieldMapO.form.jobFileKey.$setValidity("duplicate",false);
                }else{
                    fieldMapO.form.jobFileKey.$setValidity("duplicate",true);
                }
            });
        };

推荐答案

正如@ lex82所说，每次删除一行时，您都需要运行 reValidateJob 函数.

As said the @lex82, you need to run a function reValidateJob every time you delete a line.

jsfiddle 上的实时示例.

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope, $log) {
  $scope.edituserConfig = [];
  $scope.log = $log;

  $scope.remove = function(index) {
    $scope.edituserConfig.splice(index, 1);
    $scope.reValidateJob();
  }
  $scope.reValidateJob = function() {
    angular.forEach($scope.edituserConfig, function(fieldMapO) {
      var count = 0;
      angular.forEach($scope.edituserConfig, function(fieldMapI) {
        if (fieldMapO.key == fieldMapI.key) {
          count++;
        }
      });
      if (count > 1) {
        fieldMapO.form.jobFileKey.$setValidity("duplicate", false);
      } else {
        fieldMapO.form.jobFileKey.$setValidity("duplicate", true);
      }
    });
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div ng-class="{'col-sm-9':true}" class="col-md-10">
      <table class="table table-bordered table-striped table-hover table-condensed">
        <thead>
          <th>user type</th>
          <th>user Name</th>
          <th></th>
        </thead>
        <tbody>
          <tr ng-repeat="object in edituserConfig" ng-form="jobfileForm">
            <td>
              <select class="form-control" ng-model="object.key" required ng-change="reValidateJob()" name="jobFileKey" ng-init="object.form = jobfileForm">

                <option style="display:none" value=""></option>
                <option value="value1">value1t</option>
                <option value="value2">value2</option>
                <option value="value3">value3</option>
                <option value="value4">value4</option>
                <option value="value5">value5</option>
              </select>
            </td>
            <td>
              <input type="text" class="form-control" name="jobFileName" ng-model="object.value" required/>
            </td>

            <td>
              <button class="btn btn-danger btn-sm" data-style="zoom-in" ng-click="remove($index)" ng-form="jobfileForm" title="Delete">
                <span class="glyphicon glyphicon-remove"></span>
              </button>
              <pre>{{object.form.jobFileKey.$error}}</pre>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <button class="btn btn-primary btn-sm" ng-click="edituserConfig.push({'key':'','value':''})" title="Add Value">
                <span class="glyphicon glyphicon-plus"></span> Add Value
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

这篇关于Angular.js:删除重复行后验证错误未消除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！