Geek Answers Handbook

Angular Material Design Auto-fill text box with forced selection

I am using Angular Material Design now. Everything works well as expected. Now I want to use AutoFill (Angular Material Design) with forced selection so that the user always selects something. There may be no login option, user can only select.

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>
+6
source share
1 answer

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

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 HTML Error

HTML:

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

More articles:


All Articles