UI Bootstrap Typeahead：如果未選擇任何選項，則使輸入無效

Question

我在我的AngularJS應用程序（構建於jQuery庫頂部）基礎上使用基於jQuery驗證的驗證插件。

類別輸入（搜索欄）是必需的。但如果我用文本填充並且不選擇匹配的搜索，我仍然可以提交它，因爲搜索字段中有文本。如果沒有選項被選中，我怎麼能使它失效？

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 = ""; 
     } 
    }); 

Answer 1

您可以添加NG-禁用指令您提交輸入

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

請看這裏工作演示：的

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