UI引导键盘缓冲：如果没有选择的选择让输入无效 [英] UI Bootstrap Typeahead: Make input invalid if no option is selected

问题描述

我使用的是验证插件根据我在AngularJS应用jQuery验证（这是建立在jQuery库的顶部）。

是必需的类别输入（搜索字段）。但是，如果我用文字填充它并没有选择匹配搜索我仍然可以提交，是因为有一个在搜索栏中输入文字。我怎样才能使它无效的，如果没有选择的选择吗？

Plunkr：

http://plnkr.co/edit/ZYP58GxITghkTqE7PNHy

HTML（help.html）

 ＆LT; D​​IV CLASS =表单组＆GT;
        ＆LT;标签=类别＆GT;分类{{formData.category}}＆LT; /标签＆gt;
          ＆LT;输入类=表格控型=TEXTNAME =类别ID =类别占位=搜索...NG-模式=formData.category预输入=为OBJ obj.name在getCdOnCat（$ viewValue）预输入编辑=假预输入加载=loadingLocations要求＆GT;
    ＆LT; / DIV＆GT;
 

JS（的script.js） - HelpController

  //键盘缓冲：分类搜索
    $ scope.getCdOnCat =功能（searchVal）{
        返回dataFactory.getCdOnCategory（searchVal）。然后（功能（响应）{
            返回response.data.categories;
        }，功能（错误）{
            的console.log（'错误：dataFactory.getCdOnCategory'）;
        }）;
    };    $范围。$腕表（'formData.category'，功能（价值）{
        如果（价值===无匹配的类别）{
            $ scope.formData.category =;
        }
    }）;
 

解决方案

您可以NG-禁用指令添加到您提交的输入

 ＆LT; D​​IV CLASS =表单行动＆GT;
  ＆LT;输入类型=提交值=发送级=BTN BTN-主要BTN-提交NG-禁用=＆GT联系形式$无效的。
＆LT; / DIV＆GT;
 

请在这里看到工作演示：

http://plnkr.co/edit/GoOiNmyQ1LSvWvtkqumF?p=$p$ PVIEW

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引导键盘缓冲：如果没有选择的选择让输入无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！