Mat-input doesn't show number input validity

[thw0rted]

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.

[mmalerba]

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

[thw0rted]

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 (NgModel.valid) because I didn't know it was there. It would have been immensely helpful to have at least a footnote in the Error Messages or Troubleshooting section about the fact that the Form Field control uses the validity from the wrapped control's formControl (for Reactive Forms) or #NgModel (for Template Forms), and not nativeElement.validity.

[mina-skunk]

You always need a Directive for template driven form validation
https://stackblitz.com/edit/angular-ycwdpz-ri33bo?file=app%2Fmin-validator.directive.ts