Validation classes not added using type attribute

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[ x ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

When using validation offered by the type attribute on an input element, such as , Angular 2 does not add the proper ng-invalid class when the browser sees the input as invalid.

Expected behavior

ng-invalid and ng-valid classes should be added appropriately when a user’s input does not match the pattern defined by HTML5 type attribute. Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

I believe it is best practice now to use type attributes offered by HTML5 to validate user input before submission.

Please tell us about your environment:

OSX, Brackets IDE, Angular CLI

• Angular version: 2.0.X

2.0.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

All browsers

• Language: [all | TypeScript X.X | ES6/7 | ES5] Typescript
• Node (for AoT issues): node --version =

[HauntedSmores]

@pkozlowski-opensource Sorry, I just havnt had time to make a reproduction. Its really simple though - Angular 2 puts classes on form input elements based on their validity (ng-prestine, ng-valid, ng-invalid, etc.). This works when you set things like required and pattern attributes. It has recently been confirmed by a dev from Google over at the gitter server that Angular does not consider the type attribute (type email, tel, etc.) when it adds its validation classes.

If you put an input element with type=“email” and enter an email that the browser sees as invalid, angular will not add the ng-invalid class correctly

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}