break out detail components and add imports for each section

Author: kapunahelewong

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

@@ -2,9 +2,10 @@
 // #docplaster
 // #docregion
 
-import { Component, Input, OnChanges } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { Address, Hero, states } from './data-model';
+// #docregion imports
+import { Component } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+// #enddocregion
 
 //////// 1 ////////////////////////
 

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

@@ -1,11 +1,10 @@
 /* tslint:disable:component-class-suffix */
 // #docplaster
 // #docregion
-
-import { Component, Input, OnChanges } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { Address, Hero, states } from './data-model';
-
+// #docregion imports
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+// #enddocregion imports
 
 //////// 2 ////////////////////////
 

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

@@ -2,9 +2,11 @@
 // #docplaster
 // #docregion
 
-import { Component, Input, OnChanges } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { Address, Hero, states } from './data-model';
+// #docregion imports
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { states } from './data-model';
+// #enddocregion imports
 
 //////// 3 ////////////////////////
 

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

@@ -2,9 +2,9 @@
 // #docplaster
 // #docregion
 
-import { Component, Input, OnChanges } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { Address, Hero, states } from './data-model';
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { states } from './data-model';
 
 
 ////////// 4 /////////////////////

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

@@ -1,10 +1,11 @@
 /* tslint:disable:component-class-suffix */
 // #docplaster
 // #docregion
-
+// #docregion imports
 import { Component, Input, OnChanges } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { Address, Hero, states } from './data-model';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { Hero, states } from './data-model';
+// #enddocregion imports
 
 ////////// 5 ////////////////////
 

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

@@ -3,7 +3,7 @@
 // #docregion
 
 import { Component, Input, OnChanges } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { Address, Hero, states } from './data-model';
 
 

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

@@ -1,10 +1,11 @@
 /* tslint:disable:component-class-suffix */
 // #docplaster
 // #docregion
-
+// #docregion imports
 import { Component, Input, OnChanges } from '@angular/core';
-import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
 import { Address, Hero, states } from './data-model';
+// #enddocregion imports
 
 ////////// 7 ////////////////////
 

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

@@ -56,11 +56,6 @@ a#intro
   the form controls and pull user-changed values back out. The component can 
   observe changes in form control state and react to those changes.
 
-  One advantage of working with the form control objects directly is that 
-  value and validity updates are always synchronous. This contrasts with 
-  template-driven forms, which must update asynchronously because they 
-  delegate operations to a directive running in the template.
-
   In keeping with the reactive paradigm, the component  
   preserves the immutability of the _data model_,
   treating it as a pure source of original values.
@@ -133,7 +128,7 @@ a#create-component
   Make a new file called 
   `hero-detail.component.ts` in the `app` directory and import these symbols:
 
-+makeExample('reactive-forms/ts/app/hero-detail.component.ts', 'reactive-comp-imports','app/hero-detail.component.ts')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-1.component.ts', 'imports','app/hero-detail.component.ts')(format=".")
 
 :marked
   Now enter the `@Component` decorator that specifies the `HeroDetailComponent` metadata:
@@ -146,8 +141,12 @@ a#create-component
   such as when specifying the `templateUrl`.
 
   Next, create an exported `HeroDetailComponent` class with a `FormControl`. 
+  Notice that the `FormControl` is within a `FormGroup`. While you don't 
+  _have_ to put a `FormControl` in a `FormGroup` for it to work, forms 
+  usually contain multiple controls and grouping them offers advantages 
+  you'll learn later in this guide.
 
-+makeExample('reactive-forms/ts/app/hero-detail-versions.component.ts', 'v1','app/hero-detail.component.ts (excerpt)')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-1.component.ts', 'v1','app/hero-detail.component.ts (excerpt)')(format=".")
 
 :marked
   Here you are creating a `FormGroup` called `heroForm` with a child `FormControl` called `name`.
@@ -161,8 +160,8 @@ a#create-component
 
 .l-sub-section
   :marked
-    Validators won't be covered at all in this guide.
-    Learn about them in the [Form Validation](../cookbook/form-validation.html) cookbook.
+    Validators aren't covered at all in this guide.
+    Read about them in the [Form Validation](../cookbook/form-validation.html) cookbook.
 
 .l-main-section
 a#create-template
@@ -287,7 +286,10 @@ a#formbuilder
   The `FormBuilder` class helps reduce repetition and 
   clutter by handling details of control creation for you. 
 
-  You already imported `FormBuilder` into `hero-detail.component.ts`.
+  To use `FormBuilder`, you need to import it into `hero-detail.component.ts`:
++makeExample('reactive-forms/ts/app/hero-detail-2.component.ts', 'imports','app/hero-detail.component.ts (excerpt)')(format=".")
+
+:marked
   Use it now to refactor the `HeroDetailComponent` into something that's a little easier to read and write,
   by following this plan:
 
@@ -297,7 +299,7 @@ a#formbuilder
   * Call `createForm` in the constructor.
 
   The revised `HeroDetailComponent` looks like this:
-+makeExample('reactive-forms/ts/app/hero-detail-versions.component.ts', 'v2','app/hero-detail.component.ts (excerpt)')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-2.component.ts', 'v2','app/hero-detail.component.ts (excerpt)')(format=".")
 
 :marked
   `FormBuilder.group` is a factory method that creates a `FormGroup`.  
@@ -309,10 +311,17 @@ a#formbuilder
 
 :marked
   ### More FormControls
-  A hero has more than a name. A hero has an address too. 
-  Add some address `FormControls` to the `heroForm` as follows.
+  A hero has more than a name. A hero has an address too. You already have address data 
+  in `data-model.ts`, so add it to the imports so you can use it:
 
-+makeExample('reactive-forms/ts/app/hero-detail-versions.component.ts', 'v3','app/hero-detail.component.ts (excerpt)')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-3.component.ts', 'imports','app/hero-detail.component.ts (excerpt)')(format=".")
+
+:marked
+  Add some address `FormControls` to the `heroForm` as follows, being sure to 
+  also declare `states`. This allows you to populate the state select with 
+  the states in `data-model.ts`.
+
++makeExample('reactive-forms/ts/app/hero-detail-3.component.ts', 'v3','app/hero-detail.component.ts (excerpt)')(format=".")
 
 :marked
   Then add corresponding markup in `hero-detail.component.html` 
@@ -344,7 +353,7 @@ a#grouping
   Let that be the parent `FormGroup`.
   Use `FormBuilder` again to create a child `FormGroup` that encapsulates the address controls;
   assign the result to a new `address` property of the parent `FormGroup`.
-+makeExample('reactive-forms/ts/app/hero-detail-versions.component.ts', 'v4','app/hero-detail.component.ts (excerpt)')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-4.component.ts', 'v4','app/hero-detail.component.ts (excerpt)')(format=".")
 
 :marked
   You’ve changed the structure of the form controls in the component class; 
@@ -464,7 +473,7 @@ a#data-model-form-model
 :marked
   Here, again, is the component's `FormGroup` definition.
 
-+makeExample('reactive-forms/ts/app/hero-detail-versions.component.ts', 'hero-form-model','app/hero-detail.component.ts (excerpt)')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-5.component.ts', 'hero-form-model','app/hero-detail.component.ts (excerpt)')(format=".")
 :marked
   There are two significant differences between these models:
 
@@ -478,8 +487,16 @@ a#data-model-form-model
 
 :marked
   Take a moment to refactor the _address_ `FormGroup` definition for brevity and clarity as follows:
-+makeExample('reactive-forms/ts/app/hero-detail-versions.component.ts', 'address-form-group')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-6.component.ts', 'address-form-group')(format=".")
+
 :marked
+  Also be sure to update the imports so that you can use the `Hero` object:
++makeExample('reactive-forms/ts/app/hero-detail-5.component.ts', 'imports')(format=".")
+
+:marked
+  # Ward, `hero-detail-5.component.ts` is where  `@Input() hero: Hero;` 
+  # shows up for the first time, but I don't understand it or know where 
+  # I should mention it. It seems like this is the general area, but we don't demonstrate it.
 
 .l-main-section
 a#set-data
@@ -493,7 +510,7 @@ a#set-data
   With **`setValue`**, you assign _every_ form control value _at once_
   by passing in a data object whose properties exactly match the _form model_ behind the `FormGroup`.
 
-+makeExample('reactive-forms/ts/app/hero-detail-versions.component.ts', 'set-value','app/hero-detail.component.ts (excerpt)')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-6.component.ts', 'set-value','app/hero-detail.component.ts (excerpt)')(format=".")
 :marked
   The `setValue` method checks the data object thoroughly before assigning any form control values.
 
@@ -509,15 +526,15 @@ a#set-data
 
   You can only show the hero's first address and you must account for the possibility that the `hero` has no addresses at all.
   This explains the conditional setting of the `address` property in the data object argument:
-+makeExample('reactive-forms/ts/app/hero-detail-versions.component.ts', 'set-value-address')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-6.component.ts', 'set-value-address')(format=".")
 
 :marked
   ### _patchValue_
   With **`patchValue`**, you can assign values to specific controls in a `FormGroup`
   by supplying an object of key/value pairs for just the controls of interest. 
 
   This example sets only the form's `name` control.
-+makeExample('reactive-forms/ts/app/hero-detail-versions.component.ts', 'patch-value','app/hero-detail.component.ts (excerpt)')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-5.component.ts', 'patch-value','app/hero-detail.component.ts (excerpt)')(format=".")
 
 :marked
   With **`patchValue`** you have more flexibility to cope with wildly divergent data and form models.
@@ -558,9 +575,15 @@ a#set-data
   control values from the previous hero are cleared and 
   status flags are restored to the _pristine_ state.
 
+  In order to use `ngOnChanges`, add it to the `hero-detail.component.ts` 
+  imports.
+
++makeExample('reactive-forms/ts/app/hero-detail-5.component.ts', 'imports','app/hero-detail.component.ts (excerpt)')(format=".")
+
+:marked
   Here's what `ngOnChanges` should look like:
 
-+makeExample('reactive-forms/ts/app/hero-detail-versions.component.ts', 'set-value-on-changes','app/hero-detail.component.ts (excerpt)')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-6.component.ts', 'set-value-on-changes','app/hero-detail.component.ts (excerpt)')(format=".")
 
 a#hero-list
 :marked
@@ -611,7 +634,11 @@ a#form-array
   An _address_ `FormGroup` can display one `Address`.
   An Angular `FormArray` can display an array of _address_ `FormGroups`.
 
-  To work with a `FormArray` you do the following:
+  To get access to the `FormArray` class, import it into `hero-detail.component.ts`:
++makeExample('reactive-forms/ts/app/hero-detail-7.component.ts', 'imports','app/hero-detail.component.ts (excerpt)')(format=".")
+
+:marked
+  To _work_ with a `FormArray` you do the following:
   1. Define the items (`FormControls` or `FormGroups`) in the array.
   1. Initialize the array with items created from data in the _data model_.
   1. Add and remove items as the user requires.
@@ -621,15 +648,15 @@ a#form-array
 
   You’ll need to redefine the form model in the `HeroDetailComponent` constructor,
   which currently only displays the first hero address in an _address_ `FormGroup`. 
-+makeExample('reactive-forms/ts/app/hero-detail-versions.component.ts', 'address-form-group')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-6.component.ts', 'address-form-group')(format=".")
 
 :marked
   ### From _address_ to _secret lairs_
 
   From the user's point of view, heroes don't have _addresses_.
   _Addresses_ are for mere mortals. Heroes have _secret lairs_!
   Replace the _address_ `FormGroup` definition with a _secretLairs_ `FormArray` definition:
-+makeExample('reactive-forms/ts/app/hero-detail-versions.component.ts', 'secretLairs-form-array')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-7.component.ts', 'secretLairs-form-array')(format=".")
 
 .alert.is-helpful
   :marked
@@ -652,7 +679,7 @@ a#form-array
 
   The following method replaces the _secretLairs_ `FormArray` with a new `FormArray`,
   initialized by an array of hero address `FormGroups`.
-+makeExample('reactive-forms/ts/app/hero-detail-versions.component.ts', 'set-addresses')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-7.component.ts', 'set-addresses')(format=".")
 
 :marked
   Notice that you replace the previous `FormArray` with the **`FormGroup.setControl` method**, not with `setValue`.
@@ -665,7 +692,7 @@ a#form-array
 
   Use the `FormGroup.get` method to acquire a reference to that `FormArray`.
   Wrap the expression in a `secretLairs` convenience property for clarity and re-use.
-+makeExample('reactive-forms/ts/app/hero-detail-versions.component.ts', 'get-secret-lairs','app/hero-detail.component.ts (secretLayers property)')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-7.component.ts', 'get-secret-lairs','app/hero-detail.component.ts (secretLayers property)')(format=".")
 
 :marked
   ### Display the _FormArray_ 
@@ -699,7 +726,7 @@ a#form-array
   ### Add a new lair to the _FormArray_
 
   Add an `addLair` method that gets the _secretLairs_ `FormArray` and appends a new _address_ `FormGroup` to it. 
-+makeExample('reactive-forms/ts/app/hero-detail-versions.component.ts', 'add-lair','app/hero-detail.component.ts (addLair method)')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-7.component.ts', 'add-lair','app/hero-detail.component.ts (addLair method)')(format=".")
 
 :marked
   Place a button on the form so the user can add a new _secret lair_ and wire it to the component's `addLair` method.
@@ -807,7 +834,7 @@ figure.image-display
   Instead, it must prepare `saveHero` whose values derive from a combination of original hero values (the `hero.id`)
   and deep copies of the potentially-changed form model values. 
 
-  #Ward, stop lecturing#
+  # Ward, stop lecturing :D
 
 +makeExample('reactive-forms/ts/app/hero-detail.component.ts', 'prepare-save-hero','app/hero-detail.component.ts (prepareSaveHero)')(format=".")