I want a blank option with md-select and I want it not to validate when required

Question

I\'m using Angular Material and md-select and I would like to make a blank option such that when you select it, you have no value in the select. In the case that I

Answer 1

QUESTION CHANGED AFTER ASKING. Not originally about md-select so there may be a better way to do this. All you need to do is add this option to your md-select:

And remove the blank entry from your object.

HTML

    
    {{option.name}}

JavaScript

$scope.options = {id : [
    {name : 'World', value : 'World', id:3},
    {name : 'qweqwe', value : 'qweqwe', id:1},
    {name : 'rwerasdf', value : 'rwerasdf', id:2}
]}

This would be enough if you were using a regular select, but md-select considers the null value to satisfy the required attribute so you need extra work.

In your select, add a function checkNull to run onchange:

 ng-change="checkNull()"

Then add it to your scope:

$scope.checkNull = function(){
    if(typeof $scope.selectedValue2 === "undefined"){
        $scope.myform.myselect.$setValidity("required", false);
    }
};

Working Fiddle