From bdac5ca6b047c75e7f180110f6854ef9f4526bab Mon Sep 17 00:00:00 2001
From: Kapunahele Wong <kapunahelewong@gmail.com>
Date: Fri, 17 Feb 2017 13:46:42 -0500
Subject: [PATCH] =?UTF-8?q?docs(reactive-forms):=20improve=20example=20sty?=
 =?UTF-8?q?les=20and=20explain=20template=20syn=E2=80=A6=20(#3263)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

improve example styles and explain template syntax change;
fix one missed el in the example
---
 .../ts/src/app/hero-detail-4.component.html   | 10 +++++-----
 .../ts/src/app/hero-detail-5.component.html   | 10 +++++-----
 .../ts/src/app/hero-detail-6.component.html   | 10 +++++-----
 .../ts/src/app/hero-detail-7.component.html   | 10 +++++-----
 .../ts/src/app/hero-detail-8.component.html   | 10 +++++-----
 .../ts/src/app/hero-detail.component.html     | 14 +++++++-------
 .../docs/ts/latest/guide/reactive-forms.jade  | 19 +++++++++++++++++--
 7 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-4.component.html b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-4.component.html
index de8bb49e24..30529868e9 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-4.component.html
+++ b/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">
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-5.component.html b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-5.component.html
index 078a263ae8..2a41b4f2f9 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-5.component.html
+++ b/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">
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-6.component.html b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-6.component.html
index c075731f12..4c8b5c9e05 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-6.component.html
+++ b/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">
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-7.component.html b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-7.component.html
index ff24702b5a..6d68b49b4d 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-7.component.html
+++ b/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">
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-8.component.html b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-8.component.html
index 9993dd80ce..d8e47ae798 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail-8.component.html
+++ b/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">
diff --git a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail.component.html b/public/docs/_examples/reactive-forms/ts/src/app/hero-detail.component.html
index 974867706f..8f5b8bf2c8 100644
--- a/public/docs/_examples/reactive-forms/ts/src/app/hero-detail.component.html
+++ b/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>
diff --git a/public/docs/ts/latest/guide/reactive-forms.jade b/public/docs/ts/latest/guide/reactive-forms.jade
index 4bd7e18437..ee70caccc2 100644
--- a/public/docs/ts/latest/guide/reactive-forms.jade
+++ b/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