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 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.

Dan · Accepted Answer · 2018-10-08T08:22:19.667

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:

<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

edited Oct 08 '18 at 08:22

answered Oct 05 '18 at 10:12

Dan

59,490
13
101
110

Hi, thanks for the reply. For some reason, it doesn't work in my project. I am using md-select and md-option. does it changes something ? – Bobby Oct 08 '18 at 07:09
The blank option works for Angular Material too. You would add `` instead of ` – Dan Oct 08 '18 at 07:48
So this exactly, I found on internet multiple people asking how to fix this, but no real solution. Even in your exemple, "" will not trigger the "required". what value should I use to make it work ? – Bobby Oct 08 '18 at 07:57
I will edit my answer to show you. First I'm going to edit your question to be about ``. – Dan Oct 08 '18 at 08:04
I can do the edit if it make you will time. Sorry, thank you – Bobby Oct 08 '18 at 08:06

score 1 · Answer 2 · answered Oct 08 '18 at 08:21

1

Try adding the following code segment:

<md-option ng-value disabled>Choose One</md-option>

answered Oct 08 '18 at 08:21

Debabrata

124
1
10

1

this make the option diabled by default, and not usable. What i believe he need is the possibility to answer empty if if my field is not required, but you can not chose this option when it is required. Although he could disable the option if the field is required has you say – Crocsx Oct 08 '18 at 08:45
He can remove the disabled option and it would work as required. – Debabrata Oct 08 '18 at 10:05

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

2 Answers2

Linked

Related