I am not seeing the ng-invalid class applied when I type into the field a string like abc. The ng-pattern works if i test it on the console...but not in angular.
<input type="number"
step=".05"
ng-pattern="/^\d{0,}\.{0,1}\d{0,}$/"
ng-model="someNumber">
@musically_ut's plnkr in the comments works for Firefox—i.e. the input element gets class ng-invalid for string abc—but not for Chrome.
For Chrome, it works for me if I add the required attribute, i.e.
<input type="number"
step=".05"
required
ng-pattern="/^\d{0,}\.{0,1}\d{0,}$/"
ng-model="someNumber">
required means empty isn't valid, doesn't it? Well, I'm still in the midst of working on the same kind of issues, but so far I seem to be having the validation success you're looking for with changing the type from number to text. Only downside I see so far is losing the up/down spin buttons (ok for me). I'm still exploring whether I need to have pattern in addition to ng-pattern, but I'm hoping not as that causes the browser to show its own prompt like "Please match the requested format".required is ok but when the page loads its empty until the data gets filled in. so it shows as an error, which I want to avoid. Maybe I just make the regex match empty as well.