-
Notifications
You must be signed in to change notification settings - Fork 27.1k
Description
I'm submitting a ... (check one with "x")
[x] bug report
[x] feature request
[ ] support request
Current behavior
Suppose we have such an input:
<input #nativeControl #ngControl="ngModel" type="number" min="30">
Now if we enter 25 in that box, the ngControl.valid property will be true, while nativeControl.validity.valid will be false and nativeControl.validity.rangeUnderflow will be true.
Moreover, if we enter invalid characters (e.g. only dashes) in such a field, ngControl.valid property will be true. At the same time, nativeControl.validity.valid will be false and nativeControl.validity.badInput will be true;
Another example: <input type="email"> is not validated by Angular (i.e. is always valid), while HTML5 validation correctly sets ValidityState.typeMismatch to true (and ValidityState.valid to false) if invalid email address is entered.
Currently I'm testing this with chrome but I don't think there will be any differences with other browsers. They all implement HTML5 validation pretty much without any issues.
Expected behavior
I think HTML5 standard already implements validation mechanism pretty well. Please view https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation and https://developer.mozilla.org/en-US/docs/Web/API/ValidityState for example. I think Angular should either emulate, or even directly depend on that mechanism (ValidityState values defined by HTML5).
Yes I know one can implement custom validator in angular and basically emulate anything, but... I think I'd rather have <input type="email"> validation out of the box, rather than to reinvent the wheel and write new validator just for email checking.
[EDIT] Minimal reproduction of the problem with instructions
Please view an example: http://plnkr.co/edit/5pzh5pV2ExF3vKGhgEtq?p=info
Just enter number in first input, or email in second input, and you will see that Angular's validator does not respect min attribute (of <input type="number">) and also <input type="email"> inputs.
- Angular version: 4.0.X
- Browser: [all]
- Language: [TypeScript 2.X]