<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 =&gt; search github for a similar issue or PR before submitting
[ ] 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 =&gt; search github for a similar issue or PR before submitting
[ ] 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 using FormBuilder, FormGroup, FormControl, and Validators.required, the "required" and "ng-reflect-required" attributes are missing from the input. After <a href="https://angular.io/docs/ts/latest/guide/forms.html" rel="nofollow">this guide</a>:<br>
I use</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=".ng-valid[required], .ng-valid.required  {
    ...
}"><pre class="notranslate"><code class="notranslate">.ng-valid[required], .ng-valid.required  {
    ...
}
</code></pre></div>
<p dir="auto">for signing inputs that are OK or erroneous. It sounds wrong to maintain validators in two different places.</p>

<p dir="auto"><strong>Expected behavior</strong><br>
When Validators.required is added to the FormControl's synchronous validators, the .ng-valid[required] or .ng-valid.required should fire.</p>

<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
<a href="http://plnkr.co/edit/dQTANsTnaFbwXXjC35gD?p=info" rel="nofollow">http://plnkr.co/edit/dQTANsTnaFbwXXjC35gD?p=info</a></p>

<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
It sounds wrong to maintain validators in two different places, but having such a CSS selector is nice to have.</p>

<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Arch Linux i686, Apache</p>

<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.0</p>

</li>
<li>
<p dir="auto"><strong>Browser:</strong> [all | Chrome XX | Firefox XX]</p>

</li>
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =   v6.7.0</p>
</li>
</ul>
<p dir="auto"><strong>Steps to reproduce and a minimal demo of the problem</strong></p>
<p dir="auto"><a href="http://plnkr.co/edit/IAMpyeJl9rQlAcEFPoRs?p=preview" rel="nofollow">http://plnkr.co/edit/IAMpyeJl9rQlAcEFPoRs?p=preview</a></p>
<p dir="auto"><em>What steps should we try in your demo to see the problem?</em></p>
<ol dir="auto">
<li>put some input longer than 2 characters in the first input</li>
<li>try to put some input longer than 2 characters in the second input</li>
</ol>
<p dir="auto"><strong>Current behavior</strong></p>
<p dir="auto">HTML5 specifies a number of validation attributes for form elements that browsers are able to interpret to various effects.  These are useful for things like restricting input length (maxLength) and for doing DOM queries (e.g. find all required input elements).</p>
<p dir="auto">Currently, Angular2 applies validation for a number of these attributes if they are applied in the form template.  However, when forms are built using FormBuilder, validation is defined in the ControlMeta object and not as attributes on the form elements.  ngControl does not apply these validations as attributes to the host element, so when FormBuilder is used, either these attributes will not get defined and therefore the browser's HTML5 validation behavior will not be in effect or validation constraints must be duplicated in the form templates and ControlMeta.</p>
<p dir="auto"><strong>Expected/desired behavior</strong></p>
<p dir="auto">I think it would be useful to have the ngControl directive manage HTML5 validation attributes on the host form element based on the validators applied to the Control object.</p>
<p dir="auto"><strong>Other information</strong></p>