角度材料设计自动完成文本框,有强大的选择

Question

现在我正在使用Angular Material Design.一切都按预期运作良好.现在我想使用自动完成(Angular Material Design)强制选择,以便用户必须始终选择一些东西.没有进入的可能性,用户只能选择.

有谁知道如何做到这一点？？

角度材料设计链接:

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

autoComplete.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

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

这就是我所做的-

在你的控制器内部：

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>