UI Bootstrap Typeahead:如果未选择任何选项，则输入无效 [英] UI Bootstrap Typeahead: Make input invalid if no option is selected

问题描述

我在我的 AngularJS 应用程序中使用了一个基于 jQuery 验证的验证插件(它构建在一个 jQuery 库之上).

类别输入(搜索字段)是必需的.但是如果我用文本填充它并且不选择匹配的搜索，我仍然可以提交它，因为搜索字段中有文本.如果没有选择任何选项，如何使其无效?

Plunkr:

http://plnkr.co/edit/ZYP58GxITghkTqE7PNHy

HTML (help.html)

<label for="category">类别{{formData.category}}"</label><input class="form-control" type="text" name="category" id="category" placeholder="Search..." ng-model="formData.category" typeahead="obj.name for obj在 getCdOnCat($viewValue)" typeahead-editable="false" typeahead-loading="loadingLocations" required>

JS (script.js) - HelpController

//Typeahead:类别搜索$scope.getCdOnCat = 函数(searchVal){返回 dataFactory.getCdOnCategory(searchVal).then(function (response) {返回 response.data.categories;}, 函数(错误){console.log('错误:dataFactory.getCdOnCategory');});};$scope.$watch('formData.category', function (value) {if (value === "没有匹配的类别") {$scope.formData.category = "";}});

解决方案

您可以在提交输入中添加 ng-disabled 指令

<input type="submit" value="Send" class="btn btn-primary btn-submit" ng-disabled="contactForm.$invalid">

请看这里的工作演示:

http://plnkr.co/edit/GoOiNmyQ1LSvWvtkqumF?p=preview

I am using a validation plug-in based on jQuery validation in my AngularJS app (which is built on top of a jQuery library).

The category input (search field) is required. But if I fill it with text and don't select a matching search I can still submit it because there is text in the search field. How can I make it invalid if no option is selected?

Plunkr:

http://plnkr.co/edit/ZYP58GxITghkTqE7PNHy

HTML (help.html)

<div class="form-group">
        <label for="category">Category "{{formData.category}}"</label>
          <input class="form-control" type="text" name="category" id="category" placeholder="Search..." ng-model="formData.category" typeahead="obj.name for obj in getCdOnCat($viewValue)" typeahead-editable="false" typeahead-loading="loadingLocations" required>
    </div>

JS (script.js) - HelpController

//Typeahead: Category Search
    $scope.getCdOnCat = function (searchVal) {
        return dataFactory.getCdOnCategory(searchVal).then(function (response) {
            return response.data.categories;
        }, function (error) {
            console.log('Error: dataFactory.getCdOnCategory');
        });
    };

    $scope.$watch('formData.category', function (value) {
        if (value === "No matching categories") {
            $scope.formData.category = "";
        }
    });

解决方案

You can add ng-disabled directive to your Submit input

<div class="form-actions">
  <input type="submit" value="Send" class="btn btn-primary btn-submit" ng-disabled="contactForm.$invalid">
</div>

Please see here working demo:

http://plnkr.co/edit/GoOiNmyQ1LSvWvtkqumF?p=preview

这篇关于UI Bootstrap Typeahead:如果未选择任何选项，则输入无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！