docs(forms): move template reference var higher in doc (#3521)

Author: kapunahelewong

public/docs/_examples/forms/ts/src/app/hero-form.component.html

@@ -150,7 +150,9 @@ <h1>Hero Form</h1>
   <!-- #docregion phase2-->
   <div class="container">
       <h1>Hero Form</h1>
-      <form>
+      <!-- #docregion template-variable-->
+      <form #heroForm="ngForm">
+      <!-- #enddocregion template-variable-->
     <!-- #docregion ngModel-2-->
         {{diagnostic}}
         <div class="form-group">

public/docs/ts/latest/guide/forms.jade

@@ -223,6 +223,12 @@ figure.image-display
 
   *You're not using Angular yet*. There are no bindings or extra directives, just layout.
 
+.l-sub-section
+  :marked
+    In template driven forms, if you've imported `FormsModule`, you don't have to do anything 
+    to the `<form>` tag in order to make use of `FormsModule`. Continue on to see how this works.
+
+:marked
   The `container`, `form-group`, `form-control`, and `btn` classes
   come from [Twitter Bootstrap](http://getbootstrap.com/css/). These classes are purely cosmetic.
   Bootstrap gives the form a little style.
@@ -292,6 +298,31 @@ figure.image-display
 :marked
   Focus on the binding syntax: `[(ngModel)]="..."`.
 
+  You need one more addition to display the data. Declare 
+  a template variable for the form. Update the `<form>` tag with 
+  `#heroForm="ngForm"` as follows:
+
++makeExcerpt('src/app/hero-form.component.html (excerpt)', 'template-variable')
+
+:marked
+  The variable `heroForm` is now a reference to the `NgForm` directive that governs the form as a whole.
+
+.l-sub-section#ngForm
+  :marked
+    ### The _NgForm_ directive
+
+    What `NgForm` directive?
+    You didn't add an [NgForm](../api/forms/index/NgForm-directive.html) directive.
+
+    Angular did. Angular automatically creates and attaches an `NgForm` directive to the `<form>` tag.
+
+    The `NgForm` directive supplements the `form` element with additional features.
+    It holds the controls you created for the elements with an `ngModel` directive
+    and `name` attribute, and monitors their properties, including their validity.
+    It also has its own `valid` property which is true only *if every contained
+    control* is valid.
+
+:marked
   If you ran the app now and started typing in the *Name* input box,
   adding and deleting characters, you'd see them appear and disappear
   from the interpolated text.
@@ -321,7 +352,7 @@ figure.image-display
     Internally, Angular creates `FormControl` instances and
     registers them with an `NgForm` directive that Angular attached to the `<form>` tag.
     Each `FormControl` is registered under the name you assigned to the `name` attribute.
-    Read more in [The NgForm directive](#ngForm), later in this page.
+    Read more in the previous section, [The NgForm directive](#ngForm).
 
 :marked
   Add similar `[(ngModel)]` bindings and `name` attributes to *Alter Ego* and *Hero Power*.
@@ -544,25 +575,9 @@ figure.image-display
 +makeExcerpt('forms/ts/src/app/hero-form.component.html (ngSubmit)')
 
 :marked
-  You added something extra at the end. You defined a
-  template reference variable, `#heroForm`, and initialized it with the value "ngForm".
-
-  The variable `heroForm` is now a reference to the `NgForm` directive that governs the form as a whole.
-
-.l-sub-section#ngForm
-  :marked
-    ### The _NgForm_ directive
-
-    What `NgForm` directive?
-    You didn't add an [NgForm](../api/forms/index/NgForm-directive.html) directive.
-
-    Angular did. Angular automatically creates and attaches an `NgForm` directive to the `<form>` tag.
-
-    The `NgForm` directive supplements the `form` element with additional features.
-    It holds the controls you created for the elements with an `ngModel` directive
-    and `name` attribute, and monitors their properties, including their validity.
-    It also has its own `valid` property which is true only *if every contained
-    control* is valid.
+  You'd already defined a template reference variable, 
+  `#heroForm`, and initialized it with the value "ngForm". 
+  Now, use that variable to access the form with the Submit button.
 
 :marked
   You'll bind the form's overall validity via