<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>
<code class="notranslate">@angular/forms</code> package has a directive for <code class="notranslate">[required]</code> selector which adds a required validator (<code class="notranslate">Validators.required</code>). This directive allows to assign required validator conditionally depending on value of <code class="notranslate">required</code> input parameter. If value of <code class="notranslate">required</code> parameter has changed directive updates state of related control using <code class="notranslate">_onChange</code> function.</p>
<p dir="auto">This directive works great until you wrap element having 'required' attribute in <code class="notranslate">*ngIf</code> or other structural directive.</p>
<div class="highlight highlight-source-ts notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;input *ngIf=&quot;fieldVisible&quot; [required]='someCondition' type='text' formControlName='someControl'&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-smi">input</span> <span class="pl-c1">*</span><span class="pl-s1">ngIf</span><span class="pl-c1">=</span><span class="pl-s">"fieldVisible"</span> <span class="pl-kos">[</span><span class="pl-smi">required</span><span class="pl-kos">]</span><span class="pl-c1">=</span><span class="pl-s">'someCondition'</span> <span class="pl-k">type</span><span class="pl-c1">=</span><span class="pl-s">'text'</span> <span class="pl-s1">formControlName</span><span class="pl-c1">=</span><span class="pl-s">'someControl'</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">In this case if <code class="notranslate">someCondition=true</code> and <code class="notranslate">fieldVisible</code> is modified from <code class="notranslate">true</code> to <code class="notranslate">false</code> corresponding input disappears, but <code class="notranslate">Validators.required</code> (assigned by required directive) remains on the control.</p>
<p dir="auto"><strong>Expected behavior</strong><br>
If required directive assignes <code class="notranslate">Validators.required</code> it should manage its lifecycle completely and delete it on <code class="notranslate">onDestroy</code> of the directive. Otherwise we have hanging unmanageable validators.</p>
<p dir="auto">P. S. Definitely the best approach to work with required validators is to set all validators via control explicitly and catch if this validator was assigned. But this is not possible with the current design of form controls.</p>
<p dir="auto"><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><br>
Sometimes its very helpful to store state of the form in reactive controls and have only part of form displayed. In my case I use tab-based form, where only part of form is displayed.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong><br>
Any version</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong><br>
Any browser</p>
</li>
<li>
<p dir="auto"><strong>Language:</strong><br>
Any language</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong></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="[x] bug report
[x] feature request"><pre class="notranslate"><code class="notranslate">[x] bug report
[x] feature request
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
New router does not work with ngUpgrade.  There is no way to specify a primary app component as in the beta router.  And even when you try to do the same, you get an error that states <code class="notranslate">getAllAngularRootElements is not defined</code></p>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
New router should work with ngUpgrade</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
To reduce re-coding when Angular2 hits release.</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> [Chrome 51]</li>
<li><strong>Language:</strong> [TypeScript 1.8.10]</li>
</ul>