【发布时间】：2016-07-15 12:48:15
【问题描述】：
我有一个 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);
}
};
});
我没有控制台错误，无论我在输入字段中输入什么，表单都是有效的。仅当我删除所有表单无效并且输入字段设置为无效时，因为它是空的。但我根本无法设置自定义验证。
这里也可以工作。
【问题讨论】：
标签： angularjs validation angularjs-directive