javascript - Angular Material Design 具有强制选择功能的自动完成文本框

Question

现在我正在使用 Angular Material Design。一切都按预期进行。 现在我想使用自动完成(Angular Material Design)强制选择，以便用户必须始终选择一些东西。不能有进入的可能，用户只能选择。

有人知道怎么做吗？

Angular Material 设计链接:

https://material.angularjs.org/latest/#/demo/material.components.autocomplete

autoCompleteController.js

pocApp.controller('autoCompleteCtrl', function ($scope, $log, $mdDialog) {
$scope.selectedItem;
$scope.searchText;
$scope.states = loadAll();
$scope.querySearch = querySearch;
$scope.srchText;


$scope.onItemChange = function (item) {
    $log.info(angular.toJson(item));
};

$scope.saveAutoComplete = function () {
    $log.info($scope.selectedItem);
};

function querySearch(query) {
    var searchRes = [];
    angular.forEach($scope.states, function (state) {
        if (query === '') {
            searchRes.push(state);
        }
        else if (state.value.indexOf(query.toLowerCase()) === 0) {
            searchRes.push(state);
        }
    });
    return searchRes;
}

function loadAll() {
    var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
          Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
          Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
          Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
          North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
          South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
          Wisconsin, Wyoming';
    return allStates.split(/, +/g).map(function (state) {
        return {
            value: state.toLowerCase(),
            display: state
        };
    });
}

function createFilterFor(query) {
    var lowercaseQuery = angular.lowercase(query);
    return function filterFn(state) {
        return (state.value.indexOf(lowercaseQuery) === 0);
    };
}});

自动完成.html

<div ng-controller="autoCompleteCtrl">
    <form name="frmGridMasterData2" novalidate style="padding: 30px">
        <md-autocomplete flex required
                         md-input-name="autocompleteField"
                         md-min-length="0"
                         md-input-minlength="2"
                         md-input-maxlength="18"
                         md-no-cache="true"
                         md-selected-item="selectedItem"
                         md-search-text="searchText"
                         md-items="item in querySearch(searchText)"
                         md-item-text="item.display"
                         md-selected-item-change ="onItemChange(item)"
                         md-select-on-match="true"
                         md-autoselect="true"
                         md-floating-label="Favorite state">
            <md-item-template>
                <span md-highlight-text="searchText">{{item.display}}</span>
            </md-item-template>
            <div ng-messages="frmGridMasterData2.autocompleteField.$error" ng-if="frmGridMasterData2.autocompleteField.$touched">
                <div ng-message="required">You <b>must</b> have a favorite state.</div>
                <div ng-message="minlength">Your entry is not long enough.</div>
                <div ng-message="maxlength">Your entry is too long.</div>
            </div>
            <md-not-found>
                No matches found for.
            </md-not-found>
        </md-autocomplete>

        <div class="row" style="padding-left: 10px">
            <div class="col-md-12">
                <md-button name="btnSaveAutoComplete" class="md-raised md-primary" 
                           ng-click="saveAutoComplete()" ng-disabled="frmGridMasterData2.$invalid">Save</md-button>
            </div>
        </div>
    </form>
</div>

Answer 1

您可以通过将您自己的错误添加到自动完成的输入元素来实现这一点。

这是我做的-

在你的 Controller 中:

JS:

    $scope.onItemChange=function(item){
        if (item===undefined)
            $scope.formName.autocompletefield.$setValidity('notSelected',false);//sets error
        else
            $scope.formName.autocompletefield.$setValidity('notSelected',true);//removes error
    }
    $scope.querySearch=function(query){
        $scope.formName.autocompletefield.$setValidity('notSelected',false);//sets error
        //your query code here
    }

在您的 HTML 中显示错误

HTML:

    <div ng-message="notSelected">
         You have not selected Anything
    </div>