Material: md-select required not working on pristine input

Created on 23 May 2016  路  6Comments  路  Source: angular/material

Actual behavior:

  • What is the issue?
    User submit form but md-select required attribute is ignored
  • What is the expected behavior?
    md-select should show required message and red borders around the md-input-container directly if the user hits SAVE

CodePen or Steps to reproduce the issue: *

  • CodePen Demo which shows your issue : http://codepen.io/anon/pen/jqoEOG
  • Details:
    User hits SAVE button and there is no indicator that the md-select is required. This is misleading and it is currently impossible to show ng-messages to required attribute on md-select elements.
    If the User selects FAVORITE NUMBER and hits CLEAR the ng-messages are shown correctly

Angular Versions: *

  • Angular Version: 1.5.5
  • Angular Material Version: 1.0.8

Additional Information:

  • Browser Type: every
  • Browser Version: every
  • OS: every
Pull Request bug

Most helpful comment

Still not working on pristine input.
Example based on forked original demo with the latest versions of angular 1.6.2 and angular material 1.1.3. Until the user interacts with the select, the required notification is not shown when pushing the save button:

http://codepen.io/gcarbo/pen/yMPjXB

All 6 comments

@dohomi Thanks, we'll look into this.

@topherfangio thanks for looking into it. Similar handling happens to the md-datepicker reported here: https://github.com/angular/material/issues/8411

Un-deprecating as this deals with basic/expected functionality of form errors.

Same happens in material version 1.1.rcx: http://codepen.io/anon/pen/LZPvdB
The asterix is not showing on pristine input so the user does not have an indication that the field is required at all.

Still not working on pristine input.
Example based on forked original demo with the latest versions of angular 1.6.2 and angular material 1.1.3. Until the user interacts with the select, the required notification is not shown when pushing the save button:

http://codepen.io/gcarbo/pen/yMPjXB

@gerardcarbo I looked at your Codepen, as I was having the same issue, but I think I figured it out.

  1. I found that adding type="submit" to the md-button element fixed it in your example.
  2. In your example, you have ng-if="myForm.$dirty" on the ng-messages div. That bit is unnecessary, and was stopping the messages from ever popping up for me.

https://codepen.io/natwilso/pen/GEpgqB

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ghost picture ghost  路  3Comments

WebTechnolog picture WebTechnolog  路  3Comments

achaussende picture achaussende  路  3Comments

reggiepangilinan picture reggiepangilinan  路  3Comments

ddimitrop picture ddimitrop  路  3Comments