javascript - Angularjs 验证不适用于 Bootstrap typeahead

Question

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

即使从预输入中选择值，我怎样才能使字段验证？

查看:JS Fiddle Here

代码...

<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" name="two" ng-model="two" ng-valid-func="validator" class="typeahead" />
        <div class="warning" ng-show="!myForm.two.$valid">
            <i class="icon-warning-sign"></i> Two needs to be longer
        </div>
    </form>
</div>

和..

input.ng-invalid{
    background-color: #fdd !important;    
}

input.ng-valid{
    background-color: #dfd !important;    
}

和...

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()
      });
    }
  };
});

Answer 1

就像 alfrescian 说 AngularJS 有 typeahead。

参见 Fiddle .

还有一些问题需要解决，但似乎是你想要的

 <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>

你的 JS

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()
  });
  }
 };
});

希望对你有所帮助