avn*_*avn 14 validation angularjs
我有一种情况,用户需要输入由ng-repeat创建的文本区域.如果用户输入已输入的值,则新值和现值都应验证为false.如果其中一个值(现有值或新值)发生更改,则应相应更新验证.
我已经尝试了很多种选择,目前这是接近的,但仍然不是100%.
HTML:
<body ng-app="ap" ng-controller="con">
<table>
<tr>
<td>name</td>
</tr>
<tr ng-repeat="person in persons">
<td>
<ng-form name="personForm">
<div ng-class="{ 'has-error' :
personForm.personName.$invalid }">
<input type='text'
name="personName"
ng-class="empty"
ng-model="person.name"
ng-change="verifyDuplicate(this, person)"/>
</div>
</ng-form>
</td>
</tr>
</table>
JavaScript的:
var app = angular.module("ap",[]);
app.controller("con",function($scope){
$scope.persons = [
{name: 'a'},
{name: 'b'},
{name: 'c'}
];
$scope.empty = "normal";
$scope.verifyDuplicate = function(domScope, object){
for(var i = 0; i < $scope.persons.length; i++) {
if($scope.persons[i].name === object.name && $scope.persons[i] !== object) {
domScope.personForm.personName.$setValidity('duplicate',false);
}
else {
domScope.personForm.personName.$setValidity('duplicate',true);
}
}
};
});
任何有关这方面的帮助将不胜感激.
这是一个小提琴代码
Dap*_* Li 15
我认为这可能是因为verifyDuplicate方法不断设置和重新设置同一模型的有效性,因此模型触发方法调用的有效性将基于循环中的最后比较结果.
解决此问题的一种方法是让verifyDuplicate方法作为一个整体处理人员集合,无论哪个模型更改触发方法调用,在此示例中不使用$ setValidity方法,而是模型上的isDuplicate属性是设置为表示重复.
HTML:
<ng-form name="personForm">
<div ng-class="{ 'has-error' :
personForm.personName.$invalid }">
<input type='number'
name="personName"
ng-class="empty"
ng-model="person.name"
ng-change="verifyDuplicate()"/>
</div>
</ng-form>
<div class='error'
ng-if='person.isDuplicate'>
Duplicate.
</div>
JavaScript的:
$scope.verifyDuplicate = function() {
var sorted, i;
sorted = $scope.persons.concat().sort(function (a, b) {
if (a.name > b.name) return 1;
if (a.name < b.name) return -1;
return 0;
});
for(i = 0; i < $scope.persons.length; i++) {
sorted[i].isDuplicate = ((sorted[i-1] && sorted[i-1].name == sorted[i].name) || (sorted[i+1] && sorted[i+1].name == sorted[i].name));
}
};
JSFiddler:http://jsfiddle.net/luislee818/pkhxkozp/4/
如果我们坚持使用$ setValidity,我可以考虑使用"ng-init"指令将单个模型连接到其形式,但是这看起来很麻烦,如果我们采用这种方法可能会有更好的方法.
HTML:
<ng-form name="personForm">
<div ng-class="{ 'has-error' :
personForm.personName.$invalid }">
<input type='number'
name="personName"
ng-init="person.form = personForm"
ng-class="empty"
ng-model="person.name"
ng-change="verifyDuplicate()"/>
</div>
</ng-form>
<div class='error'
ng-show=
'personForm.personName.$error.duplicate'>
Duplicate.
</div>
JavaScript的:
$scope.verifyDuplicate = function() {
var sorted, i, isDuplicate;
sorted = $scope.persons.concat().sort(function (a, b) {
if (a.name > b.name) return 1;
if (a.name < b.name) return -1;
return 0;
});
for(i = 0; i < $scope.persons.length; i++) {
isDuplicate = ((sorted[i-1] && sorted[i-1].name == sorted[i].name) || (sorted[i+1] && sorted[i+1].name == sorted[i].name));
sorted[i].form.personName.$setValidity('duplicate',!isDuplicate);
}
};
JSFiddle:http://jsfiddle.net/luislee818/nzd87f1s/1/