Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

invalid MdSelect should highlight itself on parent form submitted #4611

Closed
natsid opened this issue May 17, 2017 · 2 comments · Fixed by #4754
Closed

invalid MdSelect should highlight itself on parent form submitted #4611

natsid opened this issue May 17, 2017 · 2 comments · Fixed by #4754
Assignees
@crisbeto
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@natsid
Copy link

natsid commented May 17, 2017

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Expect md-select to show red (or 'warning' color) if it is invalid and its parent form is submitted.

What is the current behavior?

Currently the select does show warning color on touched and invalid, but not on parent form submitted and invalid.

What are the steps to reproduce?

See this plunk. Both the select and the input are 'required'. Click 'submit' and see that the select does not change its appearance like the input does.

What is the use-case or motivation for changing an existing behavior?

Would like to highlight errors on submit.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

all

Is there anything else we should know?

The MdSelect likely needs to inject an @optional NgForm/@optional FormGroupDirective in its constructor like MdInputContainer does so that it can keep track of its submitted state.
@natsid
Copy link
Author

natsid commented May 17, 2017

The select's 'required' asterisk also is not 'warning' color in all the same states as it is in the input:

When an input is focused (and valid or untouched), the asterisk is 'warning' even though everything else is 'primary'. When a select is focused, everything is 'primary' including the asterisk.

@jelbourn jelbourn added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label May 18, 2017
crisbeto added a commit to crisbeto/material2 that referenced this issue May 23, 2017
@crisbeto
fix(select): consistent error behavior to md-input-container
46ae1f4 
* Gets `md-select` to behave in the same way as `md-input-container` when it comes to errors. This means highlighting itself when it is invalid and touched, or one of the parent forms/form groups is submitted.
* Moves the error state logic into a separate function in order to avoid some hard-to-follow selectors and to potentially allow overrides. This should also be a first step to supporting `md-error` inside `md-select`.
* Changes the required asterisk to always have the theme warn color, similarly to the input asterisk.

Fixes angular#4611.
@crisbeto crisbeto mentioned this issue May 23, 2017
Merged
crisbeto added a commit to crisbeto/material2 that referenced this issue May 31, 2017
@crisbeto
fix(select): consistent error behavior to md-input-container
3d8c223 
* Gets `md-select` to behave in the same way as `md-input-container` when it comes to errors. This means highlighting itself when it is invalid and touched, or one of the parent forms/form groups is submitted.
* Moves the error state logic into a separate function in order to avoid some hard-to-follow selectors and to potentially allow overrides. This should also be a first step to supporting `md-error` inside `md-select`.
* Changes the required asterisk to always have the theme warn color, similarly to the input asterisk.

Fixes angular#4611.
crisbeto added a commit to crisbeto/material2 that referenced this issue May 31, 2017
@crisbeto
fix(select): consistent error behavior to md-input-container
cf4ec30 
* Gets `md-select` to behave in the same way as `md-input-container` when it comes to errors. This means highlighting itself when it is invalid and touched, or one of the parent forms/form groups is submitted.
* Moves the error state logic into a separate function in order to avoid some hard-to-follow selectors and to potentially allow overrides. This should also be a first step to supporting `md-error` inside `md-select`.
* Changes the required asterisk to always have the theme warn color, similarly to the input asterisk.

Fixes angular#4611.
@crisbeto crisbeto mentioned this issue Jun 20, 2017
Closed
@mmalerba mmalerba mentioned this issue Jul 17, 2017
Closed
crisbeto added a commit to crisbeto/material2 that referenced this issue Jul 22, 2017
@crisbeto
fix(select): consistent error behavior to md-input-container
15be464 
* Gets `md-select` to behave in the same way as `md-input-container` when it comes to errors. This means highlighting itself when it is invalid and touched, or one of the parent forms/form groups is submitted.
* Moves the error state logic into a separate function in order to avoid some hard-to-follow selectors and to potentially allow overrides. This should also be a first step to supporting `md-error` inside `md-select`.
* Changes the required asterisk to always have the theme warn color, similarly to the input asterisk.

Fixes angular#4611.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jul 26, 2017
@crisbeto
fix(select): consistent error behavior to md-input-container
57f5f7c 
* Gets `md-select` to behave in the same way as `md-input-container` when it comes to errors. This means highlighting itself when it is invalid and touched, or one of the parent forms/form groups is submitted.
* Moves the error state logic into a separate function in order to avoid some hard-to-follow selectors and to potentially allow overrides. This should also be a first step to supporting `md-error` inside `md-select`.
* Changes the required asterisk to always have the theme warn color, similarly to the input asterisk.

Fixes angular#4611.
andrewseguin pushed a commit that referenced this issue Jul 27, 2017
@crisbeto @andrewseguin
fix(select): consistent error behavior to md-input-container (#4754)
6f73b35 
* Gets `md-select` to behave in the same way as `md-input-container` when it comes to errors. This means highlighting itself when it is invalid and touched, or one of the parent forms/form groups is submitted.
* Moves the error state logic into a separate function in order to avoid some hard-to-follow selectors and to potentially allow overrides. This should also be a first step to supporting `md-error` inside `md-select`.
* Changes the required asterisk to always have the theme warn color, similarly to the input asterisk.

Fixes #4611.
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(select): consistent error behavior to md-input-container crisbeto/material2
3 participants
@jelbourn @crisbeto @natsid