<p dir="auto">Hi,</p>
<p dir="auto">I just tried the latest beta. It is confusing to me and others I've spoken with why template variable binding to ngControl would - as visually written in the template - be binding to ngForm instead? (The current beta is requiring this according to documentation.) I believe one of the design goals of Angular was to make it clear in the template what is happening. Currently, this is not clear. The required template syntax for control binding within a form does not match what is actually occurring according to the documentation.</p>
<p dir="auto">If one wants to refer to an ngControl on the form using a template local variable, why should the binding look like the following confusing syntax where the #name template variable is tied to an ngForm directive instead as shown on your documentation page <a href="https://angular.io/docs/ts/latest/guide/forms.html" rel="nofollow">https://angular.io/docs/ts/latest/guide/forms.html</a>?</p>
<p dir="auto">CONFUSING in the current beta:<br>
ngControl="name"  #name="ngForm"</p>
<p dir="auto">BETTER:<br>
ngControl="name"  #name="ngControl"</p>
<p dir="auto">Wouldn't a better syntax be to bind the template variable for the control to the ngControl which is actually then intent and effect of this syntax even as your documentation describes?</p>
<p dir="auto">It would be even better if ngControl="name" would auto-create the #name template variable so only one attribute rather than 2 would be required but perhaps there is an interest in being highly explicit so possibly having both could make sense for the purpose of explicitness and perhaps tool binding (but it would be very nice to just be able to indicate ngControl='name' and be done.)</p>
<p dir="auto">Even so, if the #name should be tied to an ngControl, shouldn't the template reflect what is being done for clarity by using #name=ngControl rather than #name=ngForm?</p>
<p dir="auto">If we have one form on the page and 3 controls inside it, shouldn't the form itself have the template variable set to 'ngForm' (#heroForm="ngForm") while the 3 controls should be set as shown on the template to 'ngControl' (ngControl="name"  #name="ngControl" --- ngControl="addressLine1"  #addressLine1="ngControl" --- ngControl="city"  #city="ngControl")?</p>
<h4 dir="auto">as shown in documentation...</h4>
<blockquote>
<p dir="auto">Here we initialize a template local variable (name) with the value "ngForm" (#name="<strong>ngForm</strong>"). Angular recognizes that syntax and re-sets the name local template variable to the <strong>ngControl</strong> directive instance <em>[instead????]</em>. In other words, the name local template variable becomes a handle on the <strong>ngControl</strong> object for this input box.</p>
</blockquote>
<p dir="auto">I'm asking in this issue why when the documentation says that the syntax sets the instance to the ngControl directive, the syntax as written is actually showing #name="ngForm"  which intuits that Angular2 is setting the template instance variable to the ngForm?  To be consistent with what is actually happening, wouldn't the clearer syntax for an ngControl be #name="ngControl" ?</p>
<p dir="auto">Here is the form syntax that the paragraph from the documentation is explaining when it says #name='ngForm' actually makes name point to the ngControl directive:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;form (ngSubmit)=&quot;onSubmit()&quot; #heroForm=&quot;ngForm&quot;&gt;

&lt;!-- Why ngForm? Why not ngControl? --&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control&quot; required
  [(ngModel)]=&quot;model.name&quot;
    ngControl=&quot;name&quot;  #name=&quot;ngForm&quot; &gt;
&lt;div [hidden]=&quot;name.valid&quot; class=&quot;alert alert-danger&quot;&gt;
  Name is required
&lt;/div&gt;

&lt;!-- now what if we have more controls on the form? 
Why ngForm? Why not ngControl? --&gt;
&lt;input type=&quot;text&quot; class=&quot;form-control&quot; required
  [(ngModel)]=&quot;model.addressLine1&quot;
    ngControl=&quot;addressLine1&quot;  #addressLine1=&quot;ngForm&quot; &gt;
&lt;div [hidden]=&quot;addressLine1.valid&quot; class=&quot;alert alert-danger&quot;&gt;
  Address first line is required
&lt;/div&gt;

&lt;input type=&quot;text&quot; class=&quot;form-control&quot; required
  [(ngModel)]=&quot;model.name&quot;
    ngControl=&quot;city&quot;  #city=&quot;ngForm&quot; &gt;
&lt;div [hidden]=&quot;city.valid&quot; class=&quot;alert alert-danger&quot;&gt;
  City is required
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">form</span> <span class="pl-c1">(ngSubmit)</span>="<span class="pl-s">onSubmit()</span>" <span class="pl-c1">#heroForm</span>="<span class="pl-s">ngForm</span>"<span class="pl-kos">&gt;</span>

<span class="pl-c">&lt;!-- Why ngForm? Why not ngControl? --&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">text</span>" <span class="pl-c1">class</span>="<span class="pl-s">form-control</span>" <span class="pl-c1">required</span>
  <span class="pl-c1">[(ngModel)]</span>="<span class="pl-s">model.name</span>"
    <span class="pl-c1">ngControl</span>="<span class="pl-s">name</span>"  <span class="pl-c1">#name</span>="<span class="pl-s">ngForm</span>" <span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">[hidden]</span>="<span class="pl-s">name.valid</span>" <span class="pl-c1">class</span>="<span class="pl-s">alert alert-danger</span>"<span class="pl-kos">&gt;</span>
  Name is required
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>

<span class="pl-c">&lt;!-- now what if we have more controls on the form? </span>
<span class="pl-c">Why ngForm? Why not ngControl? --&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">text</span>" <span class="pl-c1">class</span>="<span class="pl-s">form-control</span>" <span class="pl-c1">required</span>
  <span class="pl-c1">[(ngModel)]</span>="<span class="pl-s">model.addressLine1</span>"
    <span class="pl-c1">ngControl</span>="<span class="pl-s">addressLine1</span>"  <span class="pl-c1">#addressLine1</span>="<span class="pl-s">ngForm</span>" <span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">[hidden]</span>="<span class="pl-s">addressLine1.valid</span>" <span class="pl-c1">class</span>="<span class="pl-s">alert alert-danger</span>"<span class="pl-kos">&gt;</span>
  Address first line is required
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">text</span>" <span class="pl-c1">class</span>="<span class="pl-s">form-control</span>" <span class="pl-c1">required</span>
  <span class="pl-c1">[(ngModel)]</span>="<span class="pl-s">model.name</span>"
    <span class="pl-c1">ngControl</span>="<span class="pl-s">city</span>"  <span class="pl-c1">#city</span>="<span class="pl-s">ngForm</span>" <span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">[hidden]</span>="<span class="pl-s">city.valid</span>" <span class="pl-c1">class</span>="<span class="pl-s">alert alert-danger</span>"<span class="pl-kos">&gt;</span>
  City is required
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Something I'd like to discuss first.</p>
<p dir="auto">It turns out, that <code class="notranslate">ngControl</code>/<code class="notranslate">NgControlName</code> is exported as <code class="notranslate">ngForm</code>. This is quite unintuitive when instances of <code class="notranslate">ngControl</code>are referenced. Say I want to display an error message when a control is invalid. I'd need an instance of that control to check it's validity:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;input ngControl=&quot;name&quot; #name=&quot;ngForm&quot;&gt;
&lt;p *ngIf=&quot;!name.valid&quot;&gt;This field is invalid!&lt;/p&gt;"><pre class="notranslate"><code class="notranslate">&lt;input ngControl="name" #name="ngForm"&gt;
&lt;p *ngIf="!name.valid"&gt;This field is invalid!&lt;/p&gt;
</code></pre></div>
<p dir="auto">While this works (and I'm unsure if that's the way to do this), I'd rather expect <code class="notranslate">ngControl</code> to be exported as <code class="notranslate">ngControl</code>:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;input ngControl=&quot;name&quot; #name=&quot;ngControl&quot;&gt;"><pre class="notranslate"><code class="notranslate">&lt;input ngControl="name" #name="ngControl"&gt;
</code></pre></div>
<p dir="auto">Is that something we can change? Or is there any reasoning behind <code class="notranslate">ngControl</code> being exported as <code class="notranslate">ngForm</code>?</p>
<p dir="auto">This would be a BREAKING change.</p>