How to clear value in md-select

Question

I want to have md-select so that the user can clear the selected value. For instance. they choose a value, but decide that they want to clear their choice.

The behavior of md-select is to select the first record in the parameters. I would like to return it to a state in which there was no choice.

I assume that I probably need a special directive for this, so I implemented a simple directive that listens for keydown for the DELETE key.

HTML:

<div ng-controller="AppCtrl as ctrl" class="md-padding selectdemoBasicUsage" ng-cloak="" ng-app="MyApp"> <div> <h1 class="md-title">Select a state</h1> <span>I want the DELETE key to be able to clear the selected state.</span> <div layout="row"> <md-input-container> <label>State</label> <md-select ng-model="ctrl.userState" select-clear> <md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}"> {{state.abbrev}} </md-option> </md-select> </md-input-container> </div> </div> </div> 

JS:

 (function () { 'use strict'; angular .module('MyApp',['ngMaterial', 'ngMessages']) .controller('AppCtrl', function() { this.userState = ''; this.states = ('AL AK AZ AR CA CO CT DE FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS ' + 'MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI ' + 'WY').split(' ').map(function (state) { return { abbrev: state }; }); }) .directive('selectClear', function() { return { restrict: 'A', require: 'ngModel', link : function(scope, iElement, iAttrs, ngModelCtrl) { iElement.bind('keydown', function(event) { if (event.keyCode === 46) { ngModelCtrl.$setViewValue('', event); } }) } } }); })(); 

Here is my code handle:

http://codepen.io/craigsh/pen/GorpVV

But this will not work - when you press the DELETE key, the first parameter value is selected.

Answer 1

I suggest using the “null” option in addition to the list of states:

  <md-select ng-model="ctrl.userState" select-clear> <md-option value="{{null}}"> -- select a state -- </md-option> <md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}"> {{state.abbrev}} </md-option> </md-select> 

so the working snippet (adapted from yours) can be:

http://codepen.io/beaver71/pen/LGxqjp

Answer 2

In Angular -material docs, they set your md-select value to undefined

  $scope.clearValue = function() { $scope.myModel = undefined; }; 

You can also check it on your website https://material.angularjs.org/latest/demo/select in the Validations section

Answer 3

In the end, I implemented a directive that works pretty nicely:

  .directive('selectClear', function($parse) { return { restrict: 'A', require: 'ngModel', link : function(scope, iElement, iAttrs) { iElement.bind('keydown', function(event) { if (event.keyCode === 46) { event.preventDefault(); event.stopPropagation(); scope.$evalAsync(function() { var modelGetter = $parse(iAttrs['ngModel']), modelSetter = modelGetter.assign; modelSetter(scope, ''); }); } }) } } } 

Answer 4

I made a simple directive to take care of this for me.

 angular.module 'app.components' .directive 'deleteWhenBlank', -> directive = restrict: 'A' require: ['ngModel'] scope: model: '=ngModel' link: ($scope, el, attrs) -> $scope.$watch('model', (value) -> unless value delete $scope.model ) 

I use it like this and it works for the examples shown. As soon as md-select loses focus, the model is set to null.

 <md-select ng-model='some.model' delete-when-blank> <md-option value=''></md-option> <md-option value='{{undefined}}'></md-option> <md-option value='{{null}}'></md-option> </md-select> 

Answer 5

In the demo version of Angular Material Select demo there is a drop-down menu "State", which reproduces the functions you need: https://material.angularjs.org/latest/demo/select

Used code:

 <md-input-container> <label>State</label> <md-select ng-model="ctrl.userState"> <md-option><em>None</em></md-option> <md-option ng-repeat="state in ctrl.states" ng-value="state.abbrev" ng-disabled="$index === 1"> {{state.abbrev}} </md-option> </md-select> </md-input-container> 

Answer 6

I'm late, and it could be an evolution in the angular lib material, but it is possible to add md-option-empty to md-option to mark it as the equivalent of empty.

 <md-option md-option-empty ng-value="undefined">No selection</md-option> 

The "No choice" option will be displayed in this list, and as soon as it is selected, make the entry empty (and pass undefined to ng-model ).

Cf doc

Answer 7

I was also late, but add a template select variable in the HTML:

 <button (click)="selectAll(selectField)">Deselect All</button> <mat-select #selectField> <mat-option *ngFor="let option of options | async" [value]="option.id"> {{option.text}} </mat-option> </mat-select> 

and in the vehicle:

 public deselectAll() { selectField.value = []; } 

Removes all check boxes and resets the material selection.