Angular Material Design Auto Complete Textbox with forceful selection

Question

Right now i am using Angular Material Design. Everything works well as expected. Now i want to use autocomplete (Angular Material Design) with force a choice so that the user must always choose something. There can be no possibility of entry, the user can only choose.

Does anyone know how to do this??

Angular Material Design Link :

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

You can implement this by adding your own error to the input element of the autocomplete.

This is what I did-

Inside your 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
    }

Display the error in your HTML

HTML:

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