Material Md select not working in AngularJS

Question

md-select not working in my code. I imported every css and js files needed for angular so dont say to import files properly. I'm building a web application. I'm almost done with that but on client side validation <md-select> not working.

<md-input-container class="md-block" style="margin-bottom: 0px;padding:2px;">
    <md-select name="gender" ng-model="gender" ng-required="true" >
    <label value="gender" style="padding-left: 13px">Gender</label>
        <md-option value="male">Male</md-option>
        <md-option value="female">Female</md-option>
        <md-option value="others">Others</md-option>
    </select>
    <div class="errors" ng-messages="form.gender.$error">
         <div ng-message="required">Please Select Your Gender</div>
     </div>
 </md-input-container>

It should work fine but for me it's not working it shows error but redirects to next page. So please someone solve my issue.

<md-select name="gender" ng-model="gender" ng-required="true" > <label value="gender" style="padding-left: 13px">Gender</label> <md-option value="male">Male</md-option> <md-option value="female">Female</md-option> <md-option value="others">Others</md-option> </md-select> <div class="errors" ng-messages="form.gender.$error"> <div ng-message="required">Please Select Your Gender</div> </div> — dharman raj
– dharman raj, Commented Dec 1, 2016 at 5:04
Is this Angular 2.x or AngularJS 1.x question? Why tag both? — Lazar Ljubenović
– Lazar Ljubenović, Commented Dec 1, 2016 at 8:41

Sajeetharan · Accepted Answer · 2016-12-01 05:04:01Z

1

<body ng-controller="myCtrl">
  <md-select name="gender" ng-model="gender" ng-required="true">
    <label value="gender" style="padding-left: 13px">Gender</label>
    <md-option value="male">Male</md-option>
    <md-option value="female">Female</md-option>
    <md-option value="others">Others</md-option>
  </md-select>
  <div class="errors" ng-messages="form.gender.$error">
    <div ng-message="required">Please Select Your Gender</div>
  </div>
</body>

DEMO

answered Dec 1, 2016 at 5:04

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sajeetharan Over a year ago

you are mixing both angular and bootstrap , go through the documentation material.angularjs.org/latest/layout/introduction

dharman raj Over a year ago

my problem is not with bootstrap and angular my problem is md-select is not working on my code . you got it man?

Sajeetharan Over a year ago

@dharmanraj that is the issue! your app is not at all angular material

Sajeetharan Over a year ago

check this demo and apply the same codepen.io/sajeetharan/pen/KNyObN

dharman raj · Accepted Answer · 2016-12-01 10:35:25Z

0

md-select not validating anymore so use select in the md-input-container. i solved this issue by following the github angular issue page.

answered Dec 1, 2016 at 10:35

dharman raj

113 bronze badges

Collectives™ on Stack Overflow

Material Md select not working in AngularJS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related