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>

我的控制器 -

        $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以点击添加按钮，如下所示

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

希望这有帮助！

Angular Js：验证表

1 个答案: