<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><br>
There seems to be no way to focus a FormControl.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
FormControl provides a <em>.focus()</em> instance method, or access to the native HTML element.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
To give input focus to a control when it is invalid, as in the following example:</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="if (!this.form.valid) {
  let invalid = &lt;FormControl[]&gt;Object.keys(this.form.controls).map(key =&gt; this.form.controls[key]).filter(ctl =&gt; ctl.invalid);
  if (invalid.length &gt; 0) {
    // Give input focus to invalid[0]... how?
  }
  return false;
}"><pre class="notranslate"><span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">form</span><span class="pl-kos">.</span><span class="pl-c1">valid</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">let</span> <span class="pl-s1">invalid</span> <span class="pl-c1">=</span> <span class="pl-kos">&lt;</span><span class="pl-smi">FormControl</span><span class="pl-kos">[</span><span class="pl-kos">]</span><span class="pl-kos">&gt;</span><span class="pl-smi">Object</span><span class="pl-kos">.</span><span class="pl-en">keys</span><span class="pl-kos">(</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">form</span><span class="pl-kos">.</span><span class="pl-c1">controls</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-s1">key</span> <span class="pl-c1">=&gt;</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">form</span><span class="pl-kos">.</span><span class="pl-c1">controls</span><span class="pl-kos">[</span><span class="pl-s1">key</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">filter</span><span class="pl-kos">(</span><span class="pl-s1">ctl</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">ctl</span><span class="pl-kos">.</span><span class="pl-c1">invalid</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">invalid</span><span class="pl-kos">.</span><span class="pl-c1">length</span> <span class="pl-c1">&gt;</span> <span class="pl-c1">0</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-c">// Give input focus to invalid[0]... how?</span>
  <span class="pl-kos">}</span>
  <span class="pl-k">return</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.2.1</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> N/A</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong> TypeScript 2.0.3</p>
</li>
</ul>
<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>Suggestion</strong></p>
<p dir="auto">Create an API on FormControl that would easily allow the input to be focused without having to resort to bringing in Renderer or ElementRef.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
This could be used widely to either easily focus the first input in a form after it is rendered, or focus inputs which have invalid data entered into them.</p>