angularjs - 以 Angular 形式设置自定义输入验证

Question

我有一个 AngularJS 表单。我实现了 typeahead 脚本，所以当有人开始输入输入字段时，值会显示在字段上方。如果定义的值为 banana、apple 和 beer，并且用户开始键入“ba”，则会出现包含值 banana 的列表。

如果用户通过 typeahead 点击 banana 值，它会通过 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>

我有 Controller :

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 的工作。

plunker

Answer 1

这是一个有效的 plunker http://plnkr.co/edit/IlJJLduidBwUfb2EZWvV?p=preview

Angular 1.6.5 http://plnkr.co/edit/fIRBuijd0xWDqZvHB24Z?p=preview

希望对您有所帮助。