docs(reactive-forms): improve example styles and explain template syn… (#3263)

improve example styles and explain template syntax change;
fix one missed el in the example

public/docs/_examples/reactive-forms/ts/src/app/hero-detail-4.component.html

@@ -29,11 +29,11 @@
       <input class="form-control" formControlName="zip">
     </label>
   </div>
-  <div class="form-group">
-    <label>Super power:</label>
-      <label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
-      <label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
-      <label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
+  <div class="form-group radio">
+    <h4>Super power:</h4>
+    <label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
+    <label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
+    <label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
   </div>
   <div class="checkbox">
     <label class="center-block">

public/docs/_examples/reactive-forms/ts/src/app/hero-detail-5.component.html

@@ -32,11 +32,11 @@
       </div>
     </div>
 <!-- #enddocregion add-group-->
-    <div class="form-group">
-      <label>Super power:</label>
-        <label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
-        <label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
-        <label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
+    <div class="form-group radio">
+      <h4>Super power:</h4>
+      <label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
+      <label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
+      <label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
     </div>
     <div class="checkbox">
       <label class="center-block">

public/docs/_examples/reactive-forms/ts/src/app/hero-detail-6.component.html

@@ -29,11 +29,11 @@
       <input class="form-control" formControlName="zip">
     </label>
   </div>
-  <div class="form-group">
-    <label>Super power:</label>
-      <label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
-      <label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
-      <label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
+  <div class="form-group radio">
+    <h4>Super power:</h4>
+    <label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
+    <label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
+    <label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
   </div>
   <div class="checkbox">
     <label class="center-block">

public/docs/_examples/reactive-forms/ts/src/app/hero-detail-7.component.html

@@ -29,11 +29,11 @@
       <input class="form-control" formControlName="zip">
     </label>
   </div>
-  <div class="form-group">
-    <label>Super power:</label>
-      <label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
-      <label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
-      <label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
+  <div class="form-group radio">
+    <h4>Super power:</h4>
+    <label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
+    <label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
+    <label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
   </div>
   <div class="checkbox">
     <label class="center-block">

public/docs/_examples/reactive-forms/ts/src/app/hero-detail-8.component.html

@@ -54,11 +54,11 @@
     </div>
     <!-- #enddocregion form-array-skeleton -->
     <!-- #enddocregion form-array-->
-    <div class="form-group">
-        <label>Super power:</label>
-          <label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
-          <label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
-          <label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
+    <div class="form-group radio">
+        <h4>Super power:</h4>
+        <label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
+        <label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
+        <label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
       </div>
       <div class="checkbox">
         <label class="center-block">

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

@@ -12,7 +12,7 @@
   <!-- Hero Detail Controls -->
   <!-- #enddocregion buttons -->
   <div class="form-group">
-      <label>Name:
+      <label class="center-block">Name:
         <input class="form-control" formControlName="name">
       </label>
   </div>
@@ -23,24 +23,24 @@
       <h4>Address #{{i + 1}}</h4>
       <div style="margin-left: 1em;">
         <div class="form-group">
-          <label>Street:
+          <label class="center-block">Street:
             <input class="form-control" formControlName="street">
           </label>
         </div>
         <div class="form-group">
-          <label>City:
+          <label class="center-block">City:
             <input class="form-control" formControlName="city">
           </label>
         </div>
         <div class="form-group">
-          <label>State:
+          <label class="center-block">State:
             <select class="form-control" formControlName="state">
               <option *ngFor="let state of states" [value]="state">{{state}}</option>
             </select>
           </label>
         </div>
         <div class="form-group">
-          <label>Zip Code:
+          <label class="center-block">Zip Code:
             <input class="form-control" formControlName="zip">
           </label>
         </div>
@@ -51,8 +51,8 @@
     <button (click)="addLair()" type="button">Add a Secret Lair</button>
   </div>
   <!-- #docregion buttons -->
-  <div class="form-group">
-    <label>Super power:</label>
+  <div class="form-group radio">
+    <h4>Super power:</h4>
     <label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
     <label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
     <label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>

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

@@ -181,12 +181,14 @@ a#create-component
   such as when specifying the `templateUrl`.
 
   Next, create an exported `HeroDetailComponent` class with a `FormControl`. 
+  `FormControl` is a directive that allows you to create and manage 
+  a `FormControl` instance directly.
   
 
 +makeExample('reactive-forms/ts/src/app/hero-detail-1.component.ts', 'v1','src/app/hero-detail.component.ts (excerpt)')(format=".")
 
 :marked
-  Here you are creating a `FormControl` called `name`.
+  Here you are creating a `FormControl` called `name`. 
   It will be bound in the template to an HTML `input` box for the hero name. 
 
   A `FormControl` constructor accepts three, optional arguments: 
@@ -311,9 +313,22 @@ a#formgroup
 
   `formGroup` is a reactive form directive that takes an existing 
   `FormGroup` instance and associates it with an HTML element. 
-  In this case, it will associate the `FormGroup` you saved as 
+  In this case, it associates the `FormGroup` you saved as 
   `heroForm` with the form element.
 
+  Because the class now has a `FormGroup`, you must update the template 
+  syntax for associating the input with the corresponding 
+  `FormControl` in the component class. 
+  Without a parent `FormGroup`, 
+  `[formControl]="name"` worked earlier because that directive 
+  can stand alone, that is, it works without being in a `FormGroup`. 
+  With a parent `FormGroup`, the `name` input needs the syntax 
+  `formControlName=name` in order to be associated 
+  with the correct `FormControl` 
+  in the class. This syntax tells Angular to look for the parent 
+  `FormGroup`, in this case `heroForm`, and then _inside_ that group 
+  to look for a `FormControl` called `name`.
+
 .l-sub-section
   :marked
     Disregard the `form-group` _CSS_ class. It belongs to the