以角度形式设置自定义输入验证

我有一个AngularJS窗体。我实现了typeahead脚本，所以当有人开始在输入字段中输入字段值时，显示在字段上方。如果定义的值是香蕉，苹果和啤酒，并且用户开始键入“ba”列表并显示值香蕉。以角度形式设置自定义输入验证

如果用户点击typeahead中的香蕉值，它将通过javascript分配到输入字段中。

如果所选值不是来自前面的列表，我想使输入字段和整个表单无效。

我的html：

<form id="form" name="form" ng-submit="formsubmit()" novalidate> 
    <input ng-model="food" ng-required="true" name="food" autocomplete="off" type="text" id="food" placeholder="Start typing" /> 
    <p class="error validationerror" ng-show="form.food.$invalid && form.food.$touched">Required</p> 
    <div class="error validationerror" ng-messages="form.food.$error"><p ng-message="food">You must specify item from list</p></div> 
    <button type="submit" id="submit" class="btn large black" ng-disabled="form.$invalid">Submit</button> 
</form>

我控制器：

var app = angular.module('app', ['ngRoute', 'ngMaterial', 'ngMessages', 'angular-loading-bar']); 
app.controller('Food', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) { 
$scope.formsubmit = function() { 
     console.log('submited'); 
    }; 

$http.get('food.php') 
    .success(function (data) { 
    $scope.foods = data; 
//typeahead script... 


}]);

现在一切工作正常。现在我们必须检查食物列表中是否定义了输入字段的值。无论它是否被粘贴，键入或从键入列表中选择。

我定义的指令：

app.directive('food', function(){ 
return { 
    require: 'ngModel', 
    link: function(scope, elem, attr, ngModel) { 
     function updateFoodInfo(scope, elem){ 
       var food1 = $('#food').val(); 
       var data = scope.foods; 
       if (data.indexOf(food1) < 0) { 
         ngModel.$parsers.unshift(function (value) { 
     ngModel.$setValidity('food', data.indexOf(value) === -1); 
     return value; 
     }); 
        } 
      } 
      setInterval(function(){updateFoodInfo(scope,elem);}, 1000); 
    } 
}; 
});

我没有控制台错误，无论我进入输入字段，形式是有效的。只有当我删除一切形式是无效的和输入字段被设置为无效，因为它是空的。但我根本无法设置自定义验证。

这里也有工作的朋友。

plunker

来源

2016-07-15 KondukterCRO