docs(reactive-forms): sample docregion cleaning

Author: wardbell

public/docs/_examples/reactive-forms/ts/app/demo.component.ts

@@ -1,5 +1,4 @@
 /* tslint:disable:member-ordering */
-// #docregion
 import { Component } from '@angular/core';
 
 import { Hero }        from './data-model';

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

@@ -1,14 +1,9 @@
 /* tslint:disable:component-class-suffix */
-// #docplaster
-// #docregion
-
 // #docregion imports
-import { Component } from '@angular/core';
+import { Component }              from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 // #enddocregion
 
-//////// 1 ////////////////////////
-
 @Component({
   moduleId: module.id,
   selector: 'hero-detail-1',

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

@@ -1,13 +1,9 @@
 /* tslint:disable:component-class-suffix */
-// #docplaster
-// #docregion
 // #docregion imports
-import { Component } from '@angular/core';
+import { Component }              from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
 // #enddocregion imports
 
-//////// 2 ////////////////////////
-
 @Component({
   moduleId: module.id,
   selector: 'hero-detail-2',

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

@@ -1,15 +1,11 @@
 /* tslint:disable:component-class-suffix */
-// #docplaster
-// #docregion
-
 // #docregion imports
-import { Component } from '@angular/core';
+import { Component }              from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
+
 import { states } from './data-model';
 // #enddocregion imports
 
-//////// 3 ////////////////////////
-
 @Component({
   moduleId: module.id,
   selector: 'hero-detail-3',

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

@@ -1,13 +1,8 @@
 /* tslint:disable:component-class-suffix */
-// #docplaster
-// #docregion
-
-import { Component } from '@angular/core';
+import { Component }              from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { states } from './data-model';
 
-
-////////// 4 /////////////////////
+import { states } from './data-model';
 
 @Component({
   moduleId: module.id,

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

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

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

@@ -1,13 +1,10 @@
 /* tslint:disable:component-class-suffix */
-// #docplaster
-// #docregion
-
+// #docregion imports
 import { Component, Input, OnChanges } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { Address, Hero, states } from './data-model';
+import { FormBuilder, FormGroup }      from '@angular/forms';
 
-
-///////// 6 ////////////////////
+import { Address, Hero, states } from './data-model';
+// #enddocregion imports
 
 @Component({
   moduleId: module.id,

public/docs/_examples/reactive-forms/ts/app/hero-detail-5.component.html renamed to public/docs/_examples/reactive-forms/ts/app/hero-detail-7.component.html

@@ -1,18 +1,15 @@
 /* tslint:disable:component-class-suffix */
-// #docplaster
-// #docregion
 // #docregion imports
-import { Component, Input, OnChanges } from '@angular/core';
+import { Component, Input, OnChanges }       from '@angular/core';
 import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
+
 import { Address, Hero, states } from './data-model';
 // #enddocregion imports
 
-////////// 7 ////////////////////
-
 @Component({
   moduleId: module.id,
   selector: 'hero-detail-7',
-  templateUrl: './hero-detail-5.component.html'
+  templateUrl: './hero-detail-7.component.html'
 })
 // #docregion v7
 export class HeroDetailComponent7 implements OnChanges {
@@ -21,9 +18,12 @@ export class HeroDetailComponent7 implements OnChanges {
   heroForm: FormGroup;
   states = states;
 
+  // #docregion ctor
   constructor(private fb: FormBuilder) {
     this.createForm();
+    this.logNameChange();
   }
+  // #enddocregion ctor
 
   createForm() {
     // #docregion secretLairs-form-array
@@ -34,6 +34,8 @@ export class HeroDetailComponent7 implements OnChanges {
     // #enddocregion secretLairs-form-array
   }
 
+  logNameChange() {/* Coming soon */}
+
   // #docregion onchanges
   ngOnChanges() {
     // #docregion reset-refactor
@@ -65,5 +67,3 @@ export class HeroDetailComponent7 implements OnChanges {
   }
   // #enddocregion add-lair
 }
-// #enddocregion v7
-

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

@@ -1,19 +1,19 @@
 // tslint:disable:no-unused-variable
 // #docplaster
 // #docregion
-// #docregion reactive-comp-imports
+// #docregion imports
 import { Component, EventEmitter, Input, Output, OnChanges } from '@angular/core';
 import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { Address, Hero, states } from './data-model';
-// #enddocregion reactive-comp-imports
+// #enddocregion imports
 
-// #docregion reactive-comp-metadata
+// #docregion metadata
 @Component({
   moduleId: module.id,
   selector: 'hero-detail',
   templateUrl: './hero-detail.component.html'
 })
-// #enddocregion reactive-comp-metadata
+// #enddocregion metadata
 export class HeroDetailComponent implements OnChanges {
   @Input() hero: Hero;
   // #docregion save-emitter

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

@@ -133,7 +133,7 @@ a#create-component
 :marked
   Now enter the `@Component` decorator that specifies the `HeroDetailComponent` metadata:
 
-+makeExample('reactive-forms/ts/app/hero-detail.component.ts', 'reactive-comp-metadata','app/hero-detail.component.ts (excerpt)')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail.component.ts', 'metadata','app/hero-detail.component.ts (excerpt)')(format=".")
 
 :marked
   The `moduleId: module.id` lets you use 
@@ -450,7 +450,9 @@ a#data-model-form-model
   The `HeroDetailComponent` should display values of a hero,
   possibly a hero retrieved from a remote server.
 
-  The hero from the server is the **_data model_**.
+  In this app, the `HeroDetailComponent` gets its hero from a parent `HeroListComponent`
+
+  The `hero` from the server is the **_data model_**.
   The `FormControl` structure is the **_form model_**.
 
   The component must copy the hero values in the _data model_ into the _form model_.
@@ -490,13 +492,8 @@ a#data-model-form-model
 +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.
+  Also be sure to update the import from `data-model` so you can reference the `Hero` class:
++makeExample('reactive-forms/ts/app/hero-detail-5.component.ts', 'import-hero')(format=".")
 
 .l-main-section
 a#set-data
@@ -726,11 +723,11 @@ a#form-array
   You'll re-use that index to compose a unique label for each address.
 
   Here's the skeleton for the _secret lairs_ section of the HTML template:
-+makeExample('reactive-forms/ts/app/hero-detail-5.component.html', 'form-array-skeleton','app/hero-detail.component.html (*ngFor)')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-7.component.html', 'form-array-skeleton','app/hero-detail.component.html (*ngFor)')(format=".")
 
 :marked
   Here's the complete template for the _secret lairs_ section:
-+makeExample('reactive-forms/ts/app/hero-detail-5.component.html', 'form-array','app/hero-detail.component.html (excerpt)')
++makeExample('reactive-forms/ts/app/hero-detail-7.component.html', 'form-array','app/hero-detail.component.html (excerpt)')
 
 :marked
   ### Add a new lair to the _FormArray_
@@ -741,7 +738,7 @@ a#form-array
 :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.
 
-+makeExample('reactive-forms/ts/app/hero-detail-5.component.html', 'add-lair','app/hero-detail.component.html (addLair button)')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-7.component.html', 'add-lair','app/hero-detail.component.html (addLair button)')(format=".")
 
 .alert.is-important
   :marked
@@ -790,7 +787,7 @@ a#observe-control
 
 :marked
   Call it in the constructor, after creating the form.
-+makeExample('reactive-forms/ts/app/hero-detail.component.ts', 'ctor')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail-7.component.ts', 'ctor')(format=".")
 
 :marked
   The `logNameChange` method pushes name-change values into a `nameChangeLog` array.