From 993b59d08f876cde94d8addabdb6d3bb29fb87e2 Mon Sep 17 00:00:00 2001
From: Kapunahele Wong <kapunahelewong@gmail.com>
Date: Thu, 16 Feb 2017 14:01:00 -0500
Subject: [PATCH 1/2] docs(reactive-forms): improve example styles and explain
 template syntax change

---
 .../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   |  8 ++++----
 .../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, 48 insertions(+), 33 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 @@ <h3><i>A FormGroup with multiple FormControls</i></h3>
       <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 @@ <h4>Secret Lair</h4>
       </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..4e8f0f816f 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 @@ <h3><i>PatchValue to initialize a value</i></h3>
       <input class="form-control" formControlName="zip">
     </label>
   </div>
-  <div class="form-group">
+  <div class="form-group radio">
     <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>
+    <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 @@ <h3><i>A FormGroup with multiple FormControls</i></h3>
       <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 @@ <h4>Address #{{i + 1}}</h4>
     </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 @@ <h4>Address #{{i + 1}}</h4>
     <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 

From 3c4a50fd6c85d1feaf954bb6f1d008ad7f74ca95 Mon Sep 17 00:00:00 2001
From: Kapunahele Wong <kapunahelewong@gmail.com>
Date: Thu, 16 Feb 2017 16:45:36 -0500
Subject: [PATCH 2/2] docs(reactive-forms): fix one missed el in the example

---
 .../reactive-forms/ts/src/app/hero-detail-6.component.html      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 4e8f0f816f..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
@@ -30,7 +30,7 @@ <h3><i>PatchValue to initialize a value</i></h3>
     </label>
   </div>
   <div class="form-group radio">
-    <label>Super power:</label>
+    <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>