如何防止用戶表單忽略angularjs 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個字母，他會發現只鍵入“俄亥俄”比選擇建議的選項容易。

但是，如果他從建議列表中進行選擇，那么我的模型將成為一個字符串，而它卻是一個對象。

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

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

我找到了實現相同結果的另一種方法，但是使用了指令並擴展了$ validators對象。

這是更新的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;
            }
          };
    }
};

}
]);

Answer 1

您可以為此驗證添加方法，例如：

$scope.isSelected = function() {
    return typeof $scope.selected == "object";
}

Answer 2

有一個名為typeahead-editable="false"的屬性。 如果將其設置為false，則不允許用戶“不”選擇某些內容，文本框將設置為空。

鏈接： https ： //angular-ui.github.io/bootstrap/#！#typeahead

typeahead-editable $（默認值：true）-是否應將模型值限制為僅從彈出窗口中選擇的值？

http://jsfiddle.net/yhpbdvva/25/

Answer 3

您將需要遍歷數組，並檢查所選值（ngModel）在該數組上是否存在。 您可以定義這樣的函數並使用ngChange調用它，該函數將在您更改值時運行

<input type="text" 
     class="form-control" 
     required
     name="state" 
     ng-model="selected" 
     .....
     ng-change="testIncluded(selected)">

在控制器內部，執行以下操作（使用Array.prototype.find ）

$scope.testIncluded = function(value) {
    let isSelectedFromStates = $scope.states.find((state) => {
        return state.name === value;
    })
    /// do something ...
}

如果名稱存在，則isSelectedFromStates不會是不確定的