Javascript Angular.js:删除重复行时未删除验证错误
重复错误我有一个表,其中有两列“用户类型”和“用户名”用户类型,有一个下拉选择,以便我可以选择预定义的用户类型并在用户名中放置一个名称。每次单击都有一个添加按钮,我正在添加另一行 我在这里做一个验证,这样用户就不能选择重复的“用户类型”。例如,在第1行中,我从下拉列表中选择“值1”。那么从第2行我应该不能选择相同的值。无论如何,这个验证工作正常。但是有一种情况,如果我添加一个重复的行,然后立即删除它,我仍然无法保存,因为验证错误仍然存在 即使我从delete按钮调用revalidate()函数,它也没有解决我的问题 我认为这可能是因为revalidate函数不断设置并重新设置同一模型的有效性,因此模型触发方法调用的有效性将基于上一次比较结果,并且适用于删除了该行的同一行 我在这里的疑问是,如何使用“删除”按钮上的“其他”来验证行数据,这意味着是否有任何方法可以将完整的对象集合作为一个整体传递并重新检查。 请帮助我,因为我不知道如何从这里开始。 @CSS- } 我的html-Javascript Angular.js:删除重复行时未删除验证错误,javascript,angularjs,validation,Javascript,Angularjs,Validation,重复错误我有一个表,其中有两列“用户类型”和“用户名”用户类型,有一个下拉选择,以便我可以选择预定义的用户类型并在用户名中放置一个名称。每次单击都有一个添加按钮,我正在添加另一行 我在这里做一个验证,这样用户就不能选择重复的“用户类型”。例如,在第1行中,我从下拉列表中选择“值1”。那么从第2行我应该不能选择相同的值。无论如何,这个验证工作正常。但是有一种情况,如果我添加一个重复的行,然后立即删除它,我仍然无法保存,因为验证错误仍然存在 即使我从delete按钮调用revalidate()函数,
<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>
它看起来像是在删除按钮的
ng click
属性中调用reValidateJob()
,应该可以解决这个问题
我创建它是为了证明它基本上是有效的。它使用Angular 1.5.0和“controller as”语法,而不是您的作用域,但这不会对您的问题产生任何影响。正如@lex82所述,每次删除一行时,您都需要运行函数
重新验证作业
现场示范
var myApp=angular.module('myApp',[]);
控制器('MyCtrl',函数($scope,$log){
$scope.edituserConfig=[];
$scope.log=$log;
$scope.remove=函数(索引){
$scope.edituserConfig.splice(索引,1);
$scope.reValidateJob();
}
$scope.reValidateJob=函数(){
angular.forEach($scope.edituserConfig,函数(fieldMapO){
var计数=0;
angular.forEach($scope.edituserConfig,函数(fieldMapI){
if(fieldMapO.key==fieldMapI.key){
计数++;
}
});
如果(计数>1){
fieldMapO.form.jobFileKey.$setValidity(“重复”,false);
}否则{
fieldMapO.form.jobFileKey.$setValidity(“重复”,真);
}
});
};
});代码>
用户类型
用户名
价值1t
价值2
价值3
价值4
价值5
{{object.form.jobFileKey.$error}
增值
您必须编写自己的验证指令,要求sngModel
并在其中添加验证规则。在这种情况下,每次值更改时都将运行验证。谢谢您的回答。但即使验证通过了,我也会遇到这个错误。我已经在我的帖子中为vaidation select添加了css,并附上了我的问题列表
<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);
}
});
};