Question

我有一张AngularJS表格。我实现了typeahead脚本，所以当有人开始输入输入时，字段值显示在字段上方。如果定义的值是香蕉，苹果和啤酒，用户开始输入＆＃34; ba＆＃34;列表显示值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>

我有控制器：

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

Answer 1

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

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

希望它有所帮助。

Answer 2

您只需要将验证添加到输入字段<input food></input>，并且您正在检查与列表中的任何内容不匹配的输入。只需更改为ngModel.$setValidity('food', data.indexOf(value) !== -1);即可。

以下是plunker：http://plnkr.co/edit/FnuNFbGiCNOXwkkuDPJ7?p=preview

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

2 个答案: