javascript - Angular JS : validating duplicate object key in table

Question

我有一个包含两列“用户类型”和“用户名”的表，用户类型有一个下拉选择，以便我可以选择预定义的用户类型并在用户名中放置一个名称。每次点击都有一个“添加”按钮，我将添加另一行。

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

这是我的jsp-

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

我的 Controller -

        $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);
                    }
                });
            };

请就删除按钮向我提出建议，我是否需要再次验证所有行？有什么好的解决办法吗？

Answer 1

嗯，我认为以下应该有效。如果没有，我会要求你创建一个 js-fiddle 或 plunker。

将 reValidateJob 添加到添加按钮的 ng-click 中，如下所示

<button class="btn btn-danger btn-sm" data-style="zoom-in" ng-click="edituserConfig.splice($index,1); reValidateJob();" ng-form="jobfileForm" title="Delete">
    <span class="glyphicon glyphicon-remove"></span>
</button> 

希望这有帮助!