AngularUI Typeahead가 ng-blur 함수를 두 번 트리거합니다.

Question

각도 ui 앞 글자 (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; 
        } 
       } 
      }; 

가 선행 입력을위한 템플릿입니다. 보시다시피 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); 
};