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

问题描述：

我有一个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

答

这里是一个工作plunker http://plnkr.co/edit/IlJJLduidBwUfb2EZWvV?p=preview

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

希望它能帮助。

抱歉，我不能打开它。你能重新检查链接吗？ – KondukterCRO

对不起，再试一次 – krutkowski86

与角1.5.8工作 - 不工作了与角1.6.5 modelValue现在是不确定的 –

答

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

这里是plunker：http://plnkr.co/edit/FnuNFbGiCNOXwkkuDPJ7?p=preview

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

相关推荐