I want a blank option with md-select and I want it

2020-04-18 08:19发布

站内问答 / JavaScript
1154 2 5

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 make it required, then I would like this option returning false at the check.

Here's a demo: https://plnkr.co/edit/FZ8xt5ZCRJY3fFMh3fFU?p=preview

<html>
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</ript>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js" data-semver="1.2.19"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form>
      <select ng-model="selectedValue2" required >
        <option ng-repeat="option in options['id'] | orderBy: 'id'" ng-value="option.value">{{option.name}}</option>
      </select>
      <button type="submit">Submit</button>
    </form>
  </body>  
</html>

My situation is more complex, so I don't want a workaround, I just would like a way to make the required working when I select the blank option.

2条回答
家丑人穷心不美
2楼-- · 2020-04-18 08:39

Try adding the following code segment:

<md-option ng-value disabled>Choose One</md-option>
查看更多
0人赞 添加讨论(0) 举报
够拽才男人
3楼-- · 2020-04-18 08:43

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:

<md-option value=""></md-option>

And remove the blank entry from your object.

HTML

<select ng-model="selectedValue2" required >
    <option value=""></option>
    <option ng-repeat="option in options['id'] | orderBy: 'id'" ng-value="option.value">{{option.name}}</option>
</select>

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)