-
Notifications
You must be signed in to change notification settings - Fork 6.7k
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.
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
Mat-input doesn't show number input validity #14057
Comments
This looks like an issue with angular forms. The template driven forms don't seem to work with min/max, reactive forms do however. I recommend using reactive forms and filing a bug in angular/angular for the missing support for min and max in template driven forms |
Yikes, what a rabbit hole. It never occurred to me that there was a totally separate validation mechanism on the Angular side that doesn't reference native validation at all, but of course it makes sense when I think about it. There is a ton of discussion over at angular/angular and it sounds like they've kind of architected themselves into a corner. None of the solutions I've found are very good. All I want out of this is Principle Of Least Surprise compliance. When I use common native validation constraints, and they're violated by user input, I want the input to present itself as invalid. I get that it's not Material's problem, but maybe a brief note on the Form Field page in the error-handling section would be in order? Like I said, I filed this issue because it didn't even occur to me to check the Angular template form validity ( |
You always need a Directive for template driven form validation |
Bug, feature request, or proposal:
Bug
What is the expected behavior?
Any invalid input should show an error state, regardless of type.
What is the current behavior?
Constraints on number input type don't cause mat-input to present as invalid.
What are the steps to reproduce?
StackBlitz here.
In the text input, you can violate a constraint (e.g., type 1 character with min-length of 2) and the input will turn red, showing the embedded mat-error, as it's supposed to. I'm not able to type or paste more characters than the max-length, but I believe that programatically setting the value longer would cause an error, and that would also display correctly.
On my browser (Chrome latest, Windows), the number input includes spinner arrows, and using these or the arrow keys, the number is correctly constrained between the min and max values. However, you are allowed to type any digits you want (including a negative sign) and this means you can violate the validation parameters. In the StackBlitz, you can type "-2" or "1000", and the input's validity state is correctly updated, but the field styling never changes and embedded mat-errors are never shown.
What is the use-case or motivation for changing an existing behavior?
Input fields with a number should show errors like anything else does.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Everywhere, as far as I can tell.
Is there anything else we should know?
It's possible that this is an issue with core Angular Forms, rather than something specific to Material2.
The text was updated successfully, but these errors were encountered: