如何防止用戶表單忽略angularjs中的提示angular-ui-bootstrap uib-typeahead

Question

我正在使用AngularJS v1.6.6和angular-ui-bootstrap版本：2.5.0創建自動填充字段。

它一切正常，但我需要一種方式來確保用戶實際上從建議列表中選擇選項。

這裏是我的代碼：

HTML：

<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl"> 
<h4>How to prevent user from typing the whole word ignoring suggestions?</h4> 
<div>Model: 
<pre>{{selected | json}}</pre> 
</div> 
<form role="form" name="chooseStateForm" autocomplete="off" novalidate> 
    <div class="form-group required"> 
     <div> 
      <label for="state" class="control-label col-sm-3">Choose a State:</label> 
       <input type="text" 
         class="form-control" 
         required 
         placeholder="Try typing the whole name of the state ignoring suggestion" 
         name="state" 
         ng-model="selected" 
         uib-typeahead="option as option.name for option in states | filter:{name: $viewValue}" 
         typeahead-min-length="1" 
         typeahead-no-results="noresults" 
         typeahead-show-hint="true" 
         > 
     </div> 
     <div ng-if="noresults"> 
     <p>No match found!</p> 
     </div> 
    </div> 
</form> 
<br><br><br><br> 
<div> 
    <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()" ng-disabled="chooseStateForm.$invalid">OK</button> 
    <button class="btn btn-primary" type="button" ng-click="$ctrl.cancel()">Cancel</button> 
</div> 

JS：

angular.module('app', ['ui.bootstrap']); 
angular.module('app').controller('TypeaheadCtrl', function($scope) { 

$scope.selected = undefined; 
$scope.states = [ 
{id: 1, name: 'Alabama'}, 
{id: 2, name: 'California'}, 
{id: 3, name: 'Delaware'}, 
{id: 4, name: 'Florida'}, 
{id: 5, name: 'Georgia'}, 
{id: 6, name: 'Hawaii'}, 
{id: 7, name: 'Idaho'}, 
{id: 8, name: 'Kansas'}, 
{id: 9, name: 'Louisiana'}, 
{id: 10, name: 'Maine'}, 
{id: 11, name: 'Nebraska'}, 
{id: 12, name: 'Ohio'}, 
{id: 13, name: 'Pennsylvania'}, 
{id: 14, name: 'Rhode Island'}, 
{id: 15, name: 'South Carolina'}, 
{id: 16, name: 'Tennessee'}, 
{id: 17, name: 'Utah'}, 
{id: 18, name: 'Vermont'}, 
{id: 19, name: 'Washington'} 
]; 
}); 

看到這個的jsfiddle，你會明白我的意思：http://jsfiddle.net/elenat82/yhpbdvva/20/

例如，如果用戶想要選擇俄亥俄州，由於只有4個字母，他可能會發現輸入「俄亥俄州」比選擇建議的選項更容易。

但是這樣做，我的模型變成了一個字符串，雖然它是一個對象，如果他從建議列表中選擇。

是的我在我的控制器中檢查模型的有效性，但我希望在用戶提交表單之前完成它，我想顯示一條錯誤消息向用戶解釋他做錯了什麼。

---------- ----------編輯

我找到了另一種方式來達到同樣的效果，但使用的指令和擴展$驗證對象。

這裏是鏈接到更新的jsfiddle：http://jsfiddle.net/elenat82/fL5fw1up/2/

這裏是更新後的代碼：

HTML：

<div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl"> 
<h4>How to prevent user from typing the whole word ignoring suggestions?</h4> 
<div>Model: 
<pre>{{selected | json}}</pre> 
<div>Errors: 
<pre>{{chooseStateForm.state.$error | json}}</pre> 
</div> 
<form role="form" name="chooseStateForm" autocomplete="off" novalidate> 
    <div class="form-group required"> 
     <div> 
      <label for="state" class="control-label col-sm-3">Choose a State:</label> 
       <input type="text" 
         class="form-control" 
         required 
         placeholder="Try typing the whole name of the state ignoring suggestion" 
         name="state" 
         ng-model="selected" 
         uib-typeahead="option as option.name for option in states | filter:{name: $viewValue}" 
         typeahead-min-length="1" 
         typeahead-no-results="noresults" 
         typeahead-show-hint="true" 
         object 
         > 
     </div> 
     <div ng-if="noresults"> 
     <p>No match found!</p> 
     </div> 
    </div> 
</form> 
<br><br><br><br> 
<div> 
    <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()" ng-disabled="chooseStateForm.$invalid">OK</button> 
    <button class="btn btn-primary" type="button" ng-click="$ctrl.cancel()">Cancel</button> 
</div> 

JS：

angular.module('app', ['ui.bootstrap']); 
angular.module('app').controller('TypeaheadCtrl', function($scope) { 

$scope.selected = undefined; 
$scope.states = [ 
{id: 1, name: 'Alabama'}, 
{id: 2, name: 'California'}, 
{id: 3, name: 'Delaware'}, 
{id: 4, name: 'Florida'}, 
{id: 5, name: 'Georgia'}, 
{id: 6, name: 'Hawaii'}, 
{id: 7, name: 'Idaho'}, 
{id: 8, name: 'Kansas'}, 
{id: 9, name: 'Louisiana'}, 
{id: 10, name: 'Maine'}, 
{id: 11, name: 'Nebraska'}, 
{id: 12, name: 'Ohio'}, 
{id: 13, name: 'Pennsylvania'}, 
{id: 14, name: 'Rhode Island'}, 
{id: 15, name: 'South Carolina'}, 
{id: 16, name: 'Tennessee'}, 
{id: 17, name: 'Utah'}, 
{id: 18, name: 'Vermont'}, 
{id: 19, name: 'Washington'} 
]; 
}); 


angular.module('app').directive('object', [function() { 
return { 
    restrict: 'A', 
    scope: {}, 
    require: 'ngModel', 
    link: function (scope, element, attrs, ngModel) { 

     ngModel.$validators.object = function(modelValue,viewValue){ 
      if (angular.isObject(modelValue)) { 
       return true; 
      } 
      else { 
       return false; 
      } 
      }; 
    } 
}; 

} 
]);