javascript - 回调函数内的 Angular 形式验证 - Angular 1.2.5

Question

我正在使用 indexedDb 作为存储的应用程序。在检查 key 是否存在的其中一种形式中，我遇到了一个奇怪的错误。下面是我的验证指令代码

app.directive('ensureUnique',['abcService', function ($abcService){
return {
    require : 'ngModel',
    link : function(scope,elem,attr,ctrl) {
        scope.$watch(attr.ngModel, function(){
             var checkExpenseType = $abcService.checkExpenseType();
             var index = checkExpenseType.get(scope.newExpenseName );
             index.onsuccess = function (e) {
                var result = e.target.result;
                if(result) {
                    ctrl.$setValidity('exists', true);
                 }else{
                    ctrl.$setValidity('exists', false);
                 }
             };
             index.onerror = function(e) {
                // TODO
             };   
        });
    }, 
  }}
]);

在输入文本时，如果该值第一次与数据库中的键匹配，则会显示正确的错误消息。下一次按键错误消失，这是正确的行为，但对于后续按键错误再次出现，即使数据库中不存在键。

 For example if "Food"  is the key in DB
 Foo - No error
 Food - Error - Key exists
 Foods - No error
 Foodss - Error - key exists
 Foodsss - Error - key exists
 ...       

因为有 3 个字符的最小长度标准，所以在我输入 3 个字符之前不会触发指令。

如果我以预期的方式进行验证或存在更好的方式，请同时告诉我

提前致谢

Answer 1

我已经 fork 了您的 Fiddle 并做了一些更改。 http://jsfiddle.net/U9y3H/1 .

首先，我添加了一个 scope.$apply()，因为您的验证是异步发生的，因此在 Angular 的摘要周期之外。

其次，如果找到匹配项，我将 $setValidity 设置为 false，如果未找到匹配项，则设置为 true。如果您想在条目已存在的情况下使该字段无效，我相信这是正确的。

if(result) {
    // If a match is found, mark the field as invalid.
    ctrl.$setValidity('exists', false); 
}else{
    // If a match is not found mark "exists" as valid.
    ctrl.$setValidity('exists', true);
}
// Apply the validation changes.
scope.$apply();