<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">this is to reopen <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="184271493" data-permission-text="Title is private" data-url="https://github.com/angular/angular/issues/12410" data-hovercard-type="issue" data-hovercard-url="/angular/angular/issues/12410/hovercard" href="https://github.com/angular/angular/issues/12410">#12410</a>.</p>
<p dir="auto"><strong>Current behavior</strong></p>

<p dir="auto">With the following routes:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="[{
  path: 'root',
  canActivateChild: [RootGuard],
  children: [{
    path: 'branch',
    canActivateChild: [BranchGuard],
    children: [{
      path: 'leaf', component: LeafCmp
    }]
  }]
}]"><pre class="notranslate"><span class="pl-kos">[</span><span class="pl-kos">{</span>
  <span class="pl-c1">path</span>: <span class="pl-s">'root'</span><span class="pl-kos">,</span>
  <span class="pl-c1">canActivateChild</span>: <span class="pl-kos">[</span><span class="pl-v">RootGuard</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
  <span class="pl-c1">children</span>: <span class="pl-kos">[</span><span class="pl-kos">{</span>
    <span class="pl-c1">path</span>: <span class="pl-s">'branch'</span><span class="pl-kos">,</span>
    <span class="pl-c1">canActivateChild</span>: <span class="pl-kos">[</span><span class="pl-v">BranchGuard</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c1">children</span>: <span class="pl-kos">[</span><span class="pl-kos">{</span>
      <span class="pl-c1">path</span>: <span class="pl-s">'leaf'</span><span class="pl-kos">,</span> <span class="pl-c1">component</span>: <span class="pl-v">LeafCmp</span>
    <span class="pl-kos">}</span><span class="pl-kos">]</span>
  <span class="pl-kos">}</span><span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">]</span></pre></div>
<p dir="auto">when navigating to <code class="notranslate">/root/branch/leaf</code>, RootGuard will run <strong>twice</strong>.<br>
With more levels of nested routes, it's repeating more times. Generally, canActivateChild will run repeatedly for each level of children.</p>
<p dir="auto"><strong>Expected behavior</strong></p>

<p dir="auto">canActivateChild guard should only run once for a navigation.</p>
<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong></p>

<p dir="auto"><a href="http://plnkr.co/edit/1Qs4vFxKOGAedNYagFwq?p=preview" rel="nofollow">http://plnkr.co/edit/1Qs4vFxKOGAedNYagFwq?p=preview</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>

<p dir="auto">This is a bug with canActivateChild, and after walking through all test suites related, no found of cases to test this.</p>
<p dir="auto">Update: for example, if firing XHR request in the canActivateChild guard, the requests may be repeated, that's apparently a perf issue.</p>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>

<ul dir="auto">
<li><strong>Angular version:</strong> 2.x/4.x</li>
</ul>

<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</p>
<ul dir="auto">
<li><strong>Language:</strong> [all | TypeScript X.X | ES6/7 | ES5]<br>
all</li>
<li><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =<br>
6.9.x</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>
When using the new forms with rc2 binding a template reference variable to <code class="notranslate">ngModel</code> doesn't work as described in the <a href="https://docs.google.com/document/u/1/d/1RIezQqE4aEhBRmArIAS1mRIZtWFf6JxN_7B4meyWK0Y/pub" rel="nofollow">new form proposal</a>. The error I'm getting is:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="EXCEPTION: Error: Uncaught (in promise): Template parse errors:
There is no directive with &quot;exportAs&quot; set to &quot;ngModel&quot; (&quot; type=&quot;text&quot; class=&quot;form-control&quot;
 formControlName=&quot;email&quot; [(ngModel)]=&quot;admin.email&quot; [ERROR -&gt;]#email=&quot;ngModel&quot;&gt;
 &lt;div *ngIf=&quot;loginForm.hasError('required', 'email') &amp;&amp; email.touched&quot; c&quot;): LoginComponent@12:66
There is no directive with &quot;exportAs&quot; set to &quot;ngModel&quot; (&quot;assword&quot; class=&quot;form-control&quot;
 formControlName=&quot;password&quot; [(ngModel)]=&quot;admin.password&quot; [ERROR -&gt;]#password=&quot;ngModel&quot;&gt;
 &lt;div *ngIf=&quot;loginForm.hasError('required', 'password') &amp;&amp; password.t&quot;): LoginComponent@19:70"><pre class="notranslate"><code class="notranslate">EXCEPTION: Error: Uncaught (in promise): Template parse errors:
There is no directive with "exportAs" set to "ngModel" (" type="text" class="form-control"
 formControlName="email" [(ngModel)]="admin.email" [ERROR -&gt;]#email="ngModel"&gt;
 &lt;div *ngIf="loginForm.hasError('required', 'email') &amp;&amp; email.touched" c"): LoginComponent@12:66
There is no directive with "exportAs" set to "ngModel" ("assword" class="form-control"
 formControlName="password" [(ngModel)]="admin.password" [ERROR -&gt;]#password="ngModel"&gt;
 &lt;div *ngIf="loginForm.hasError('required', 'password') &amp;&amp; password.t"): LoginComponent@19:70
</code></pre></div>
<p dir="auto"><strong>Expected/desired behavior</strong><br>
It should be possible to bind a template reference variable to <code class="notranslate">ngModel</code> to check if a field is valid, touched, pristine, etc. Like so:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;input [(ngModel)]=&quot;person.name.first&quot; #first=&quot;ngModel&quot;&gt;
&lt;input [(ngModel)]=&quot;person.name.last&quot;&gt;
{{ first.valid }}  // true"><pre class="notranslate"><code class="notranslate">&lt;input [(ngModel)]="person.name.first" #first="ngModel"&gt;
&lt;input [(ngModel)]="person.name.last"&gt;
{{ first.valid }}  // true
</code></pre></div>
<p dir="auto"><strong>Reproduction of the problem</strong><br>
Trying to bind ngModel to a template reference variable.</p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong><br>
To show custom error messages, like so:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;input type=&quot;text&quot; class=&quot;form-control&quot;
  formControlName=&quot;email&quot; [(ngModel)]=&quot;admin.email&quot; name=&quot;email&quot; #email=&quot;ngModel&quot;&gt;
&lt;div *ngIf=&quot;loginForm.hasError('required', 'email') &amp;&amp; email.touched&quot; class=&quot;alert alert-danger&quot;&gt;Email is required&lt;/div&gt;
&lt;div *ngIf=&quot;loginForm.hasError('pattern', 'email') &amp;&amp; email.touched&quot; class=&quot;alert alert-danger&quot;&gt;Not a valid email address&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;input type="text" class="form-control"
  formControlName="email" [(ngModel)]="admin.email" name="email" #email="ngModel"&gt;
&lt;div *ngIf="loginForm.hasError('required', 'email') &amp;&amp; email.touched" class="alert alert-danger"&gt;Email is required&lt;/div&gt;
&lt;div *ngIf="loginForm.hasError('pattern', 'email') &amp;&amp; email.touched" class="alert alert-danger"&gt;Not a valid email address&lt;/div&gt;
</code></pre></div>
<p dir="auto"><strong>Please tell us about your environment:</strong></p>
<ul dir="auto">
<li><strong>Angular version:</strong> 2.0.0-rc.2</li>
<li><strong>Browser:</strong> [all]</li>
<li><strong>Language:</strong> [TypeScript 1.8.10 | ES5]</li>
</ul>