Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

md-select required not working on pristine input #8529

Closed
dohomi opened this issue May 23, 2016 · 6 comments
Closed

md-select required not working on pristine input #8529

dohomi opened this issue May 23, 2016 · 6 comments
Assignees
@topherfangio
Labels
has: Pull Request A PR has been created to address this issue type: bug
Milestone
1.1.0

Comments

@dohomi
Copy link

dohomi commented May 23, 2016 •
edited
Loading

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
@ThomasBurleson ThomasBurleson added this to the - Backlog milestone May 23, 2016
@topherfangio
Copy link
Contributor

@dohomi Thanks, we'll look into this.

@dohomi
Copy link
Author

dohomi commented May 25, 2016

@topherfangio thanks for looking into it. Similar handling happens to the md-datepicker reported here: #8411

@ThomasBurleson ThomasBurleson modified the milestones: - Backlog, Deprecated May 26, 2016
@topherfangio topherfangio modified the milestones: - Backlog, Deprecated May 26, 2016
@topherfangio
Copy link
Contributor

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

@dohomi
Copy link
Author

dohomi commented May 27, 2016

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.

@topherfangio topherfangio mentioned this issue May 31, 2016
Closed
@topherfangio topherfangio added the in progress Mainly for in progress PRs, but may be used for issues that require multiple PRs label May 31, 2016
topherfangio added a commit to profoundry-us/material that referenced this issue Jun 3, 2016
@topherfangio
Fix select pristine/dirty error and many styles.
0b79788 
NOT READY FOR MERGE

Need to share with others to see improved UI functionality and
styles and get sign-off.

Fixes angular#8529.
topherfangio added a commit to profoundry-us/material that referenced this issue Jun 4, 2016
@topherfangio
Fix select pristine/dirty error and many styles.
93de4d8 
_NOT READY FOR MERGE - Need to share with others to see improved
UI functionality/styles and get sign-off._

Fix styles and code to follow pristine/dirty styling of other
input elements and provide CSS class for stand-alone usage.

 - Select now behaves like a normal input, appearing as invalid
   if the user focuses/blurs the element, or submits the form,
   without selecting an option.
 - Fix issues with floating labels not working on focus.
 - Add new `md-no-underline` CSS class to allow for stand-alone
   usage (non-form).
 - Update demos to show new stand-alone usage.

Fixes angular#8529. Fixes angular#7988.
topherfangio added a commit to profoundry-us/material that referenced this issue Jun 5, 2016
@topherfangio
Fix select pristine/dirty error and many styles.
2161b72 
_NOT READY FOR MERGE - Need to share with others to see improved
UI functionality/styles and get sign-off._

Fix styles and code to follow pristine/dirty styling of other
input elements and provide CSS class for stand-alone usage.

 - Select now behaves like a normal input, appearing as invalid
   if the user focuses/blurs the element, or submits the form,
   without selecting an option.
 - Fix issues with floating labels not working on focus.
 - Add new `md-no-underline` CSS class to allow for stand-alone
   usage (non-form).
 - Update demos to show new stand-alone usage.

Fixes angular#8529. Fixes angular#7988.
@ThomasBurleson ThomasBurleson removed the P1: urgent Urgent issues that should be addressed in the next minor or patch release. label Jun 6, 2016
@ThomasBurleson ThomasBurleson modified the milestones: - Backlog, 1.1.0 Jun 6, 2016
topherfangio added a commit to profoundry-us/material that referenced this issue Jun 6, 2016
@topherfangio
fix(select): Fix pristine/dirty error, scope conflict, and many styles.
8691063 
Fix styles and code to follow pristine/dirty styling of other
input elements and provide CSS class for stand-alone usage.

 - Select now behaves like a normal input, appearing as invalid
   if the user focuses/blurs the element, or submits the form,
   without selecting an option.
 - Fix issues with floating labels not working on focus.
 - Add new `md-no-underline` CSS class to allow for stand-alone
   usage (non-form).
 - Update demos to show new stand-alone usage.

Additionally, the select component currently sets the `isOpen`
variable on the `$scope`. This can cause conflicts if the user
has their own `isOpen` variable on the scope.

Fix by privatizing our own variable to `_mdSelectIsOpen` to
reduce chances of a conflict.

Fixes angular#8529. Fixes angular#7988. Fixes angular#8527.
@topherfangio topherfangio mentioned this issue Jun 6, 2016
Closed
@topherfangio topherfangio added has: Pull Request A PR has been created to address this issue and removed in progress Mainly for in progress PRs, but may be used for issues that require multiple PRs labels Jun 6, 2016
topherfangio added a commit to profoundry-us/material that referenced this issue Jun 9, 2016
@topherfangio
fix(select): Fix pristine/dirty error, scope conflict, and many styles.
bc800e2 
Fix styles and code to follow pristine/dirty styling of other
input elements and provide CSS class for stand-alone usage.

 - Select now behaves like a normal input, appearing as invalid
   if the user focuses/blurs the element, or submits the form,
   without selecting an option.
 - Fix issues with floating labels not working on focus.
 - Add new `md-no-underline` CSS class to allow for stand-alone
   usage (non-form).
 - Update demos to show new stand-alone usage with required
   example.
 - Standardize asterisk visibility when required when standalone
   or inside of a `<md-input-container>`

Additionally, the select component currently sets the `isOpen`
variable on the `$scope`. This can cause conflicts if the user
has their own `isOpen` variable on the scope.

Fix by privatizing our own variable to `_mdSelectIsOpen` to
reduce chances of a conflict.

Fixes angular#8529. Fixes angular#7988. Fixes angular#8527.
@adibas03 adibas03 mentioned this issue Feb 26, 2017
Closed
@gerardcarbo
Copy link

gerardcarbo commented Mar 17, 2017 •
edited
Loading

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

@chibibiscuit
Copy link

@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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@topherfangio topherfangio

Labels
has: Pull Request A PR has been created to address this issue type: bug
Projects
None yet
Milestone
1.1.0
Development

No branches or pull requests
5 participants
@topherfangio @ThomasBurleson @dohomi @chibibiscuit @gerardcarbo