<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[ ] bug report =&gt; search github for a similar issue or PR before submitting
[ x ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[ ] bug report =&gt; search github for a similar issue or PR before submitting
[ x ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong></p>

<p dir="auto">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.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">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.<br>
<strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">I believe it is best practice now to use type attributes offered by HTML5 to validate user input before submission.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<p dir="auto">OSX, Brackets IDE, Angular CLI</p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.X</li>
</ul>

<p dir="auto">2.0.0</p>
<ul dir="auto">
<li><strong>Browser:</strong> [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 ]</li>
</ul>

<p dir="auto">All browsers</p>
<ul dir="auto">
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
Typescript</li>
<li><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =</li>
</ul>
<p dir="auto">Data types: email, url, number, date, time, week, month.</p>