Skip to content

Angular's input validation should align with HTML5 validation! (Currently it does not!) #16352

@tx8821

Description

@tx8821

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]

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions