Question

我正在尝试验证角度ui typeahead（https://angular-ui.github.io/bootstrap/）字段。我的问题是我的验证功能是在模糊时触发的，但从下拉菜单中选择一个选项的行为算作模糊，所以我的功能触发两次，一次是当他们从下拉菜单中选择时再次离开时

第一次，它会抛出一个错误，因为它在用户选择了他们想要的字段之前验证了不完整的字段。然后它再次触发并在他们实际离开现场时完成验证。

我想跳过下拉选项中发生的验证，因此只有在用户完全离开字段后才会验证。我尝试使用typeahead-on-select执行该功能，但它没有按照我希望的方式工作，我认为它的用途是用于别的，但告诉我我是不是错了。

验证是检查字段中的值是否与加载时检索到的列表中的值匹配：

$scope.validateNumber = function() {
                for(var i = 0; i < $scope.myList.length; i++) {
                    console.log($scope.myForm.mynumber.$viewValue);
                    console.log($scope.myList[i].myfield);
                    if ($scope.myForm.mynumber.$viewValue !== $scope.myList[i].CustNo) {
                        console.log('they do NOT match!');

                        $scope.myForm.mynumber.$setValidity("valid", false);

                    }
                    else{
                        console.log('they do match!');
                        $scope.myForm.mynumber.$setValidity("valid", true);
                        break;
                    }
                }
            };

这是typeahead的模板。如您所见，我使用ng-blur调用上面的函数。我不能在模糊上使用ng-model-options，因为这样的类型工作不会起作用，因为它需要在模型更改时更新。

                          <input othervalidationdirective
                           type="text"
                           class="form-control input-sm"
                           id="mynumber"
                           name="mynumber"
                           ng-model="myinfo.myfield"
                           ng-change="otherfield = null"
                           ng-blur="validateNumber()"
                           uib-typeahead="option as option.MyValue for option in myList | filter:$viewValue | limitTo:8"
                           typeahead-template-url="/tpl.html"
                           typeahead-loading="loading"
                           typeahead-on-select="onSelect($item, 10)"
                           typeahead-min-length="2"
                           typeahead-no-results="noResults"
                           required>

Answer 1

为onBlur函数添加超时。

function onBlurFunction(){
  $timeout(function(){ 
    //some code
  }, 300);
};

AngularUI Typeahead触发两次ng-blur功能

1 个答案: