<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="[x] bug report
[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">[x] bug report
[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><br>
When you bind validation attributes the ngModel doesn't expose the correct errors.<br>
When I set binding for <code class="notranslate">minlength</code> attribute ngModel.errors never expose <code class="notranslate">minlength</code> error.<br>
When I set binding for <code class="notranslate">pattern</code> attribute ngModel.error has <code class="notranslate">pattern</code> error but with wrong pattern value (^null$).</p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
ngModel.errors has to expose the correct errors.<br>
For <code class="notranslate">minlength</code> validation ngModel.errors has to expose <code class="notranslate">{"minlength": { "requiredLength": 2, "actualLength": 1}</code><br>
For <code class="notranslate">pattern</code> validation ngModel.errors has to expose <code class="notranslate">{ "pattern" : ....}</code></p>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
Here is the plunkr: <a href="http://plnkr.co/edit/BCJ8wMpaYMT7PdrpgAFI" rel="nofollow">http://plnkr.co/edit/BCJ8wMpaYMT7PdrpgAFI</a><br>
There are two inputs with validation attributes showing value, classes and ngModel validation errors.</p>
<p dir="auto">The first one has attributes setted with values and works fine.<br>
The second one has validation attribute bindings on <code class="notranslate">require</code>, <code class="notranslate">minlength</code>, <code class="notranslate">maxlength</code> and <code class="notranslate">pattern</code>, but only required works fine, <code class="notranslate">minlength</code> never apperars in validation errors and <code class="notranslate">pattern</code> has wrong value (example:  { "pattern": { "requiredPattern": "^null$", "actualValue": "dd" } }). <code class="notranslate">maxlength</code> seems to work fine but I think that it is due to native HtmlInputElement implementation.</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
I think we should able to bind <code class="notranslate">minlength</code> and <code class="notranslate">maxlength</code> directly without ' attr.'  preffix, but the most important is that ngModel.errors can to expose the correct error to be used to show error messages.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
We need validation attribute binding in order to create custom input components.<br>
For example you can see <a href="https://github.com/angular/material2/blob/master/src/components/input/input.html"><code class="notranslate">md-input</code> implementation of angular material 2</a> it has <code class="notranslate">[attr.minlength]</code> binding however its doesn't work ...</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.4</li>
<li><strong>Browser:</strong> [all ]</li>
<li><strong>Language:</strong> [TypeScript]</li>
</ul>
<p dir="auto">For example, in my demo I start with<br>
`import {Component} from 'angular2/angular2';<br>
and then I immediately show how cool it is that I can navigate to definition of that symbol and read the documentation, and how it's guaranteed to be the correct docs for this version (unlike some blog post).</p>
<p dir="auto">But the documentation says<br>
<code class="notranslate">{@link ComponentMetadata} factory function.</code><br>
so okay, I can click through again to the definition, by observing that it probably lives on the type declared on the following line<br>
<code class="notranslate">export declare var Component: ComponentFactory;</code><br>
and on <code class="notranslate">ComponentFactory</code> I find what I want.</p>
<p dir="auto">But this makes the demo kind of lame, and has an unneeded extra hop for what's likely to be the most common "jump to docs" use case. (Also the Java jokes will commence when users see everything is a "Factory").</p>
<p dir="auto">Can we still change this, or is there a reason it has to be this way? <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/mhevery/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/mhevery">@mhevery</a>?</p>
<ul dir="auto">
<li>the docs don't appear for properties like 'templateUrl' because that is re-declared separate from the Metadata class</li>
<li>the {<a class="user-mention notranslate" data-hovercard-type="organization" data-hovercard-url="/orgs/link/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/link">@link</a>} syntax is not navigable in VSCode</li>
</ul>