Javascript 角度JS验证不适用于引导'；前面有打字机吗

我有一个表单，我使用angular js和bootstrap。在我引入typeahead之前，验证都已经设置好并可以正常工作-当选择一个值时，不会触发验证

即使在从typeahead中选择值时，如何让字段进行验证

请看： 代码。。。 而且

var app = angular.module('myApp', [])

var myCtrl = function($scope){

    $scope.one = ""
    $scope.two = ""

    $scope.validator = function(val){
        return val.length > 3
    }

}

$(function(){
    $('.typeahead').typeahead({
        source: ['animal','alphabet','alphabot!','alfalfa']
    })
})


app.directive('ngValidFunc', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        if (attrs.ngValidFunc && scope[attrs.ngValidFunc] && scope[attrs.ngValidFunc](viewValue, scope, elm, attrs, ctrl)) {
          ctrl.$setValidity('custom', true);
        } else {
          ctrl.$setValidity('custom', false);
        }
        return elm.val()
      });
    }
  };
});

---

正如Alfrecian所说，AngularJS有

typeahead

看

仍然需要解决一些问题，但这似乎是你想要的

 <div ng-app="myApp" ng-controller="myCtrl">
<form action="" name="myForm">
    <input type="text" name="one" ng-model="one" ng-valid-func="validator" />
    <div class="warning" ng-show="!myForm.one.$valid">
        <i class="icon-warning-sign"></i> One needs to be longer
    </div>
   <input type="text" ng-model="two" ng-valid-func="validator" typeahead="suggestion for suggestion in option($viewValue)"/>
    <div class="warning" ng-show="!myForm.two.$valid">
        <i class="icon-warning-sign"></i> Two needs to be longer
    </div>
  </form>   
</div>

---

希望它能帮助您解决问题。

我使用Angular UI typeahead的目的是：在选择值时，select参数上会执行一个typeahead，此时您可以触发表单验证。@Alfrecian我正在尝试类似的方法，但无法使其工作：

var app = angular.module('myApp', [])

var myCtrl = function($scope){

    $scope.one = ""
    $scope.two = ""

    $scope.validator = function(val){
        return val.length > 3
    }

}

$(function(){
    $('.typeahead').typeahead({
        source: ['animal','alphabet','alphabot!','alfalfa']
    })
})


app.directive('ngValidFunc', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        if (attrs.ngValidFunc && scope[attrs.ngValidFunc] && scope[attrs.ngValidFunc](viewValue, scope, elm, attrs, ctrl)) {
          ctrl.$setValidity('custom', true);
        } else {
          ctrl.$setValidity('custom', false);
        }
        return elm.val()
      });
    }
  };
});

 <div ng-app="myApp" ng-controller="myCtrl">
<form action="" name="myForm">
    <input type="text" name="one" ng-model="one" ng-valid-func="validator" />
    <div class="warning" ng-show="!myForm.one.$valid">
        <i class="icon-warning-sign"></i> One needs to be longer
    </div>
   <input type="text" ng-model="two" ng-valid-func="validator" typeahead="suggestion for suggestion in option($viewValue)"/>
    <div class="warning" ng-show="!myForm.two.$valid">
        <i class="icon-warning-sign"></i> Two needs to be longer
    </div>
  </form>   
</div>

var app = angular.module('myApp', ['ui.bootstrap'])

var myCtrl = function($scope, limitToFilter){

$scope.one = ""
$scope.two = ""

 $scope.option = function(value) {
       console.log(value);    
  return limitToFilter($scope.options, 10);   
 };

$scope.options = ['animal','alphabet','alphabot!','alfalfa'];   


$scope.validator = function(val){
    return val.length > 3
}

$scope.run = function(value){
    console.log(value);
};             

}

app.directive('ngValidFunc', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
  ctrl.$parsers.unshift(function(viewValue) {
    if (attrs.ngValidFunc && scope[attrs.ngValidFunc] && scope[attrs.ngValidFunc](viewValue, scope, elm, attrs, ctrl)) {
      ctrl.$setValidity('custom', true);
    } else {
      ctrl.$setValidity('custom', false);
    }
    return elm.val()
  });
  }
 };
});