具有强制选择的 Angular Material Design 自动完成文本框答案

【问题标题】：Angular Material Design Auto Complete Textbox with forceful selection具有强制选择的 Angular Material Design 自动完成文本框
【发布时间】：2015-08-22 03:52:44
【问题描述】：

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

有人知道怎么做吗？

Angular 材料设计链接：

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>

【问题讨论】：

确保你的角度材质版本是>=0.9.7

标签： javascript angularjs html angular-material

【解决方案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>

【讨论】：