From 2ca77d80ece0199f0da71c7a72cf7e3d958a507c Mon Sep 17 00:00:00 2001
From: Kapunahele Wong <kapunahelewong@gmail.com>
Date: Wed, 7 Feb 2018 15:41:16 -0500
Subject: [PATCH] docs: refactor revert() and call to lifecylce hook, edit doc
 to changes (#22094)

PR Close #22094
---
 .../reactive-forms/src/app/app.module.ts      |  30 +-
 .../hero-detail/hero-detail-2.component.html  |   2 +-
 .../hero-detail/hero-detail-3.component.html  |   4 +-
 .../hero-detail/hero-detail-4.component.html  |   2 +-
 .../hero-detail/hero-detail-5.component.html  |   2 +-
 .../hero-detail/hero-detail-6.component.html  |   2 +-
 .../hero-detail/hero-detail-6.component.ts    |  12 +-
 .../hero-detail/hero-detail-7.component.html  |   2 +-
 .../hero-detail/hero-detail-7.component.ts    |  39 +-
 .../hero-detail/hero-detail-8.component.html  |   4 +-
 .../hero-detail/hero-detail-8.component.ts    |   8 +-
 .../hero-detail/hero-detail.component.html    |   4 +-
 .../app/hero-detail/hero-detail.component.ts  |  11 +-
 aio/content/guide/reactive-forms.md           | 845 ++++++++----------
 14 files changed, 461 insertions(+), 506 deletions(-)

diff --git a/aio/content/examples/reactive-forms/src/app/app.module.ts b/aio/content/examples/reactive-forms/src/app/app.module.ts
index 1772861c85..39b074c178 100644
--- a/aio/content/examples/reactive-forms/src/app/app.module.ts
+++ b/aio/content/examples/reactive-forms/src/app/app.module.ts
@@ -6,32 +6,38 @@ import { BrowserModule }       from '@angular/platform-browser';
 import { ReactiveFormsModule } from '@angular/forms';  // <-- #1 import module
 
 import { AppComponent }        from './app.component';
-import { HeroDetailComponent } from './hero-detail/hero-detail.component'; // <-- #1 import component
+import { HeroDetailComponent } from './hero-detail/hero-detail.component';
 // #enddocregion v1
+// #docregion hero-service-list
+// add JavaScript imports
 import { HeroListComponent }   from './hero-list/hero-list.component';
-
-import { HeroService }         from './hero.service'; //  <-- #1 import service
+import { HeroService }         from './hero.service';
 // #docregion v1
 
 @NgModule({
-  imports: [
-    BrowserModule,
-    ReactiveFormsModule // <-- #2 add to @NgModule imports
-  ],
   declarations: [
     AppComponent,
     HeroDetailComponent,
 // #enddocregion v1
-    HeroListComponent
+    HeroListComponent // <--declare HeroListComponent
 // #docregion v1
   ],
-// #enddocregion v1
-  exports: [ // export for the DemoModule
+ // #enddocregion hero-service-list
+  imports: [
+    BrowserModule,
+    ReactiveFormsModule // <-- #2 add to @NgModule imports
+  ],
+  // #enddocregion v1
+  // export for the DemoModule
+  // #docregion hero-service-list
+  // ...
+  exports: [
     AppComponent,
     HeroDetailComponent,
-    HeroListComponent
+    HeroListComponent // <-- export HeroListComponent
   ],
-  providers: [ HeroService ], // <-- #4 provide HeroService
+  providers: [ HeroService ], // <-- provide HeroService
+// #enddocregion hero-service-list
 // #docregion v1
   bootstrap: [ AppComponent ]
 })
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.html b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.html
index 1e98354842..79410c4a6d 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.html
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-2.component.html
@@ -1,7 +1,7 @@
 <!-- #docregion basic-form-->
 <h2>Hero Detail</h2>
 <h3><i>FormControl in a FormGroup</i></h3>
-<form [formGroup]="heroForm" novalidate>
+<form [formGroup]="heroForm">
   <div class="form-group">
     <label class="center-block">Name:
       <input class="form-control" formControlName="name">
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.html b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.html
index 8edc544dd4..89c5513566 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.html
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.html
@@ -1,7 +1,7 @@
 <!-- #docregion basic-form-->
 <h2>Hero Detail</h2>
 <h3><i>A FormGroup with a single FormControl using FormBuilder</i></h3>
-<form [formGroup]="heroForm" novalidate>
+<form [formGroup]="heroForm">
   <div class="form-group">
     <label class="center-block">Name:
       <input class="form-control" formControlName="name">
@@ -13,4 +13,4 @@
 <!-- #docregion form-value-json -->
 <p>Form value: {{ heroForm.value | json }}</p>
 <p>Form status: {{ heroForm.status | json }}</p>
-<!-- #enddocregion form-value-json  -->
+<!-- #enddocregion form-value-json -->
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.html b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.html
index 30529868e9..8702eeb540 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.html
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-4.component.html
@@ -1,7 +1,7 @@
 <!-- #docregion -->
 <h2>Hero Detail</h2>
 <h3><i>A FormGroup with multiple FormControls</i></h3>
-<form [formGroup]="heroForm" novalidate>
+<form [formGroup]="heroForm">
   <div class="form-group">
     <label class="center-block">Name:
       <input class="form-control" formControlName="name">
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.html b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.html
index 2a41b4f2f9..bc73ce006e 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.html
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-5.component.html
@@ -1,5 +1,5 @@
 
-<form [formGroup]="heroForm" novalidate>
+<form [formGroup]="heroForm">
     <div class="form-group">
       <label class="center-block">Name:
         <input class="form-control" formControlName="name">
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.html b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.html
index 4c8b5c9e05..a6f352a9b9 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.html
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.html
@@ -1,7 +1,7 @@
 <!-- #docregion -->
 <h2>Hero Detail</h2>
 <h3><i>PatchValue to initialize a value</i></h3>
-<form [formGroup]="heroForm" novalidate>
+<form [formGroup]="heroForm">
   <div class="form-group">
     <label class="center-block">Name:
       <input class="form-control" formControlName="name">
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.ts
index 39d18bffab..042b21aaf7 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.ts
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.ts
@@ -44,7 +44,13 @@ export class HeroDetailComponent6 implements OnChanges {
   }
 
   // #docregion patch-value-on-changes
-  ngOnChanges() { // <-- wrap patchValue in ngOnChanges
+  ngOnChanges() { // <-- call rebuildForm in ngOnChanges
+    this.rebuildForm();
+  }
+  // #enddocregion patch-value-on-changes
+
+  // #docregion patch-value-rebuildform
+  rebuildForm() { // <-- wrap patchValue in rebuildForm
     this.heroForm.reset();
     // #docregion patch-value
     this.heroForm.patchValue({
@@ -52,7 +58,9 @@ export class HeroDetailComponent6 implements OnChanges {
     });
     // #enddocregion patch-value
   }
-  // #enddocregion patch-value-on-changes
+  // #enddocregion patch-value-rebuildform
 }
 
+
+
 // #enddocregion v6
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.html b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.html
index 6d68b49b4d..57b00ca92c 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.html
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.html
@@ -1,7 +1,7 @@
 <!-- #docregion -->
 <h2>Hero Detail</h2>
 <h3><i>A FormGroup with multiple FormControls</i></h3>
-<form [formGroup]="heroForm" novalidate>
+<form [formGroup]="heroForm">
   <div class="form-group">
     <label class="center-block">Name:
       <input class="form-control" formControlName="name">
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.ts
index d12d06f070..b70b2e879d 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.ts
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-7.component.ts
@@ -38,32 +38,31 @@ export class HeroDetailComponent7 implements OnChanges {
 
   // #docregion ngOnChanges
   ngOnChanges() {
+    this.rebuildForm();
+  }
+   // #enddocregion ngOnChanges
+
+    // #docregion rebuildForm
+  rebuildForm() {
     this.heroForm.reset({
       name: this.hero.name,
-      address: this.hero.addresses[0] || new Address()
-    });
-  }
-  // #enddocregion ngOnChanges
-
-  /* First version of ngOnChanges
-  // #docregion ngOnChanges-1
-  ngOnChanges()
-  // #enddocregion ngOnChanges-1
-  */
-  ngOnChanges1() {
-    // #docregion reset
-    this.heroForm.reset();
-    // #enddocregion reset
-    // #docregion ngOnChanges-1
-    // #docregion set-value
-    this.heroForm.setValue({
-      name:    this.hero.name,
       // #docregion set-value-address
       address: this.hero.addresses[0] || new Address()
       // #enddocregion set-value-address
     });
+  }
+  // #enddocregion rebuildForm
+
+  /* First version of rebuildForm */
+  rebuildForm1() {
+    // #docregion reset
+    this.heroForm.reset();
+     // #enddocregion reset
+     // #docregion set-value
+     this.heroForm.setValue({
+      name:    this.hero.name,
+      address: this.hero.addresses[0] || new Address()
+   });
     // #enddocregion set-value
   }
-  // #enddocregion ngOnChanges-1
 }
-
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.html b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.html
index d8e47ae798..bfb591551e 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.html
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.html
@@ -1,7 +1,7 @@
 <!-- #docplaster-->
 <h3><i>Using FormArray to add groups</i></h3>
 
-<form [formGroup]="heroForm" novalidate>
+<form [formGroup]="heroForm">
     <p>Form Changed: {{ heroForm.dirty }}</p>
 
     <div class="form-group">
@@ -11,7 +11,9 @@
     </div>
     <!-- #docregion form-array-->
     <!-- #docregion form-array-skeleton -->
+    <!-- #docregion form-array-name -->
     <div formArrayName="secretLairs" class="well well-lg">
+    <!-- #enddocregion form-array-name -->
       <div *ngFor="let address of secretLairs.controls; let i=index" [formGroupName]="i" >
         <!-- The repeated address template -->
     <!-- #enddocregion form-array-skeleton -->
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.ts
index f782eb1fcb..f3e09df7fe 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.ts
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-8.component.ts
@@ -39,12 +39,18 @@ export class HeroDetailComponent8 implements OnChanges {
 
   // #docregion onchanges
   ngOnChanges() {
+    this.rebuildForm();
+  }
+  // #enddocregion onchanges
+
+  // #docregion rebuildform
+  rebuildForm() {
     this.heroForm.reset({
       name: this.hero.name
     });
     this.setAddresses(this.hero.addresses);
   }
-  // #enddocregion onchanges
+// #enddocregion rebuildform
 
   // #docregion get-secret-lairs
   get secretLairs(): FormArray {
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.html b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.html
index 8f5b8bf2c8..c5e77ba43d 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.html
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.html
@@ -1,11 +1,11 @@
 <!-- #docplaster -->
 <!-- #docregion -->
   <!-- #docregion buttons -->
-<form [formGroup]="heroForm" (ngSubmit)="onSubmit()" novalidate>
+<form [formGroup]="heroForm" (ngSubmit)="onSubmit()">
   <div style="margin-bottom: 1em">
     <button type="submit"
             [disabled]="heroForm.pristine" class="btn btn-success">Save</button> &nbsp;
-    <button type="reset" (click)="revert()"
+    <button type="button" (click)="revert()"
             [disabled]="heroForm.pristine" class="btn btn-danger">Revert</button>
   </div>
 
diff --git a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.ts
index bf6d64a0fa..13ef66b0f9 100644
--- a/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.ts
+++ b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail.component.ts
@@ -13,7 +13,10 @@ import { HeroService }           from '../hero.service';
   templateUrl: './hero-detail.component.html',
   styleUrls: ['./hero-detail.component.css']
 })
+
+// #docregion onchanges-implementation
 export class HeroDetailComponent implements OnChanges {
+// #enddocregion onchanges-implementation
   @Input() hero: Hero;
 
   heroForm: FormGroup;
@@ -42,6 +45,10 @@ export class HeroDetailComponent implements OnChanges {
   }
 
   ngOnChanges() {
+    this.rebuildForm();
+  }
+
+  rebuildForm() {
     this.heroForm.reset({
       name: this.hero.name
     });
@@ -66,7 +73,7 @@ export class HeroDetailComponent implements OnChanges {
   onSubmit() {
     this.hero = this.prepareSaveHero();
     this.heroService.updateHero(this.hero).subscribe(/* error handling */);
-    this.ngOnChanges();
+    this.rebuildForm();
   }
   // #enddocregion on-submit
 
@@ -92,7 +99,7 @@ export class HeroDetailComponent implements OnChanges {
   // #enddocregion prepare-save-hero
 
   // #docregion revert
-  revert() { this.ngOnChanges(); }
+  revert() { this.rebuildForm(); }
   // #enddocregion revert
 
   // #docregion log-name-change
diff --git a/aio/content/guide/reactive-forms.md b/aio/content/guide/reactive-forms.md
index d6194c9e61..2727809e72 100644
--- a/aio/content/guide/reactive-forms.md
+++ b/aio/content/guide/reactive-forms.md
@@ -24,7 +24,7 @@ and share a common set of form control classes.
 But they diverge markedly in philosophy, programming style, and technique.
 They even have their own modules: the `ReactiveFormsModule` and the `FormsModule`.
 
-### _Reactive_ forms
+### Reactive forms
 Angular _reactive_ forms facilitate a _reactive style_ of programming
 that favors explicit management of the data flowing between
 a non-UI _data model_ (typically retrieved from a server) and a
@@ -58,7 +58,7 @@ and returns a new _data model_ to the component that reflects the updated model
 Using reactive form directives does not require you to follow all reactive priniciples,
 but it does facilitate the reactive programming approach should you choose to use it.
 
-### _Template-driven_ forms
+### Template-driven forms
 
 _Template-driven_ forms, introduced in the [Template guide](guide/forms), take a completely different approach.
 
@@ -83,10 +83,10 @@ which may complicate development in more advanced scenarios.
 
 ### Async vs. sync
 
-Reactive forms are synchronous. Template-driven forms are asynchronous. It's a difference that matters.
+Reactive forms are synchronous while template-driven forms are asynchronous.
 
 In reactive forms, you create the entire form control tree in code.
-You can immediately update a value or drill down through the descendents of the parent form
+You can immediately update a value or drill down through the descendants of the parent form
 because all controls are always available.
 
 Template-driven forms delegate creation of their form controls to directives.
@@ -106,15 +106,15 @@ You must wrap your test block in `async()` or `fakeAsync()` to
 avoid looking for values in the form that aren't there yet.
 With reactive forms, everything is available when you expect it to be.
 
-### Which is better, reactive or template-driven?
+### Choosing reactive or template-driven forms
 
-Neither is "better".
-They're two different architectural paradigms,
+Reactive and template-driven forms are
+two different architectural paradigms,
 with their own strengths and weaknesses.
 Choose the approach that works best for you.
 You may decide to use both in the same application.
 
-The balance of this _reactive forms_ guide explores the _reactive_ paradigm and
+The rest of this page explores the _reactive_ paradigm and
 concentrates exclusively on reactive forms techniques.
 For information on _template-driven forms_, see the [_Forms_](guide/forms) guide.
 
@@ -151,7 +151,7 @@ Using the CLI, generate a new class named `data-model`:
 
 </code-example>
 
-And copy the content below:
+And copy the following into `data-model.ts`:
 
 <code-example path="reactive-forms/src/app/data-model.ts" title="src/app/data-model.ts" linenums="false">
 
@@ -161,8 +161,6 @@ The file exports two classes and two constants. The `Address`
 and `Hero` classes define the application _data model_.
 The `heroes` and `states` constants supply the test data.
 
-
-
 {@a create-component}
 
 
@@ -190,71 +188,48 @@ a `FormControl` instance directly.
 
 </code-example>
 
-
-
-Here you are creating a `FormControl` called `name`.
-It will be bound in the template to an HTML `input` box for the hero name.
+This creates a `FormControl` called `name`.
+It will be bound in the template to an HTML `<input>` element for the hero name.
 
 A `FormControl` constructor accepts three, optional arguments:
 the initial data value, an array of validators, and an array of async validators.
 
-This simple control doesn't have data or validators.
-In real apps, most form controls have both.
-
 
 <div class="l-sub-section">
 
-
-
-This guide touches only briefly on `Validators`. For an in-depth look at them,
-read the [Form Validation](guide/form-validation) guide.
-
+This simple control doesn't have data or validators.
+In real apps, most form controls have both. For in-depth information on
+`Validators`, see the [Form Validation](guide/form-validation) guide.
 
 </div>
 
-
-
-
 {@a create-template}
 
-
 ## Create the template
 
-Now update the component's template, with the following markup.
-
+Now update the component's template with the following markup.
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-1.component.html" region="simple-control" title="src/app/hero-detail/hero-detail.component.html" linenums="false">
 
 </code-example>
 
-
-
 To let Angular know that this is the input that you want to
 associate to the `name` `FormControl` in the class,
 you need `[formControl]="name"` in the template on the `<input>`.
 
-
-
 <div class="l-sub-section">
 
-
-
-Disregard the `form-control` _CSS_ class. It belongs to the
+Disregard the `form-control` CSS class. It belongs to the
 <a href="http://getbootstrap.com/" title="Bootstrap CSS">Bootstrap CSS library</a>,
-not Angular.
-It _styles_ the form but in no way impacts the logic of the form.
-
+not Angular, and styles the form but in no way impacts the logic.
 
 </div>
 
-
-
 {@a import}
 
+## Import the `ReactiveFormsModule`
 
-## Import the _ReactiveFormsModule_
-
-The HeroDetailComponent template uses `formControlName`
+The `HeroDetailComponent` template uses the `formControlName`
 directive from the `ReactiveFormsModule`.
 
 Do the following two things in `app.module.ts`:
@@ -263,124 +238,170 @@ Do the following two things in `app.module.ts`:
 the `ReactiveFormsModule`.
 1. Add `ReactiveFormsModule` to the `AppModule`'s `imports` list.
 
-
 <code-example path="reactive-forms/src/app/app.module.ts" region="v1" title="src/app/app.module.ts (excerpt)" linenums="false">
 
 </code-example>
 
-
-
 {@a update}
 
-
-
-## Display the _HeroDetailComponent_
+## Display the `HeroDetailComponent`
 Revise the `AppComponent` template so it displays the `HeroDetailComponent`.
 
 <code-example path="reactive-forms/src/app/app.component.1.html" title="src/app/app.component.html" linenums="false">
 
 </code-example>
 
-
-
 {@a essentials}
 
+## Essential form classes
+This guide uses four fundamental classes to build a reactive form:
 
-### Essential form classes
-It may be helpful to read a brief description of the core form classes.
 
-* [_AbstractControl_](api/forms/AbstractControl "API Reference: AbstractControl")
-is the abstract base class for the three concrete form control classes:
+<table>
+
+  <tr>
+
+    <th>
+      Class
+    </th>
+
+    <th>
+      Description
+    </th>
+
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>AbstractControl</code>
+    </td>
+
+    <td>
+
+      [`AbstractControl`](api/forms/AbstractControl "API Reference: FormControl") is the abstract base class for the three concrete form control classes;
 `FormControl`, `FormGroup`, and `FormArray`.
-It provides their common behaviors and properties, some of which are _observable_.
+It provides their common behaviors and properties.
 
-* [_FormControl_](api/forms/FormControl "API Reference: FormControl")
-tracks the value and validity status of an _individual_ form control.
-It corresponds to an HTML form control such as an input box or selector.
+    </td>
 
-* [_FormGroup_](api/forms/FormGroup "API Reference: FormGroup")
-tracks the value and validity state of a _group_ of `AbstractControl` instances.
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>FormControl</code>
+    </td>
+
+    <td>
+
+      [`FormControl`](api/forms/FormControl "API Reference: FormControl")
+tracks the value and validity status of an individual form control.
+It corresponds to an HTML form control such as an `<input>` or `<select>`.
+
+    </td>
+
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>FormGroup</code>
+    </td>
+
+    <td>
+
+      [`FormGroup`](api/forms/FormGroup "API Reference: FormGroup")
+tracks the value and validity state of a group of `AbstractControl` instances.
 The group's properties include its child controls.
 The top-level form in your component is a `FormGroup`.
 
-* [_FormArray_](api/forms/FormArray "API Reference: FormArray")
-tracks the value and validity state of a numerically indexed _array_ of `AbstractControl` instances.
+    </td>
 
-You'll learn more about these classes as you work through this guide.
+  </tr>
+
+  <tr>
+
+    <td style="vertical-align: top">
+      <code>FormArray</code>
+    </td>
+
+    <td>
+
+      [`FormArray`](api/forms/FormArray "API Reference: FormArray")
+tracks the value and validity state of a numerically indexed array of `AbstractControl` instances.
+
+    </td>
+
+  </tr>
+
+</table>
 
 
+## Style the app
 
-### Style the app
-You used bootstrap CSS classes in the template HTML of both the `AppComponent` and the `HeroDetailComponent`.
-Add the `bootstrap` _CSS stylesheet_ to the head of `styles.css`:
+To use the bootstrap CSS classes that are in the template HTML of both the `AppComponent` and the `HeroDetailComponent`,
+add the `bootstrap` CSS stylesheet to the head of `styles.css`:
 
 
 <code-example path="reactive-forms/src/styles.1.css" title="styles.css" linenums="false">
 
 </code-example>
 
+Now that everything is wired up, serve the app with:
 
+<code-example language="sh" class="code-shell">
 
-Now that everything is wired up, the browser should display something like this:
+  ng serve
+
+</code-example>
+
+The browser should display something like this:
 
 
 <figure>
   <img src="generated/images/guide/reactive-forms/just-formcontrol.png" alt="Single FormControl">
 </figure>
 
-
-
 {@a formgroup}
 
-
 ## Add a FormGroup
-Usually, if you have multiple *FormControls*, you'll want to register
+Usually, if you have multiple `FormControls`, you register
 them within a parent `FormGroup`.
-This is simple to do. To add a `FormGroup`, add it to the imports section
+To add a `FormGroup`, add it to the imports section
 of `hero-detail.component.ts`:
 
-
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-2.component.ts" region="imports" title="src/app/hero-detail/hero-detail.component.ts" linenums="false">
 
 </code-example>
 
-
-
 In the class, wrap the `FormControl` in a `FormGroup` called `heroForm` as follows:
 
-
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-2.component.ts" region="v2" title="src/app/hero-detail/hero-detail.component.ts" linenums="false">
 
 </code-example>
 
-
-
 Now that you've made changes in the class, they need to be reflected in the
 template. Update `hero-detail.component.html` by replacing it with the following.
 
-
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-2.component.html" region="basic-form" title="src/app/hero-detail/hero-detail.component.html" linenums="false">
 
 </code-example>
 
-
-
-Notice that now the single input is in a `form` element. The `novalidate`
-attribute in the `<form>` element prevents the browser
-from attempting native HTML validations.
+Notice that now the single `<input>` is in a `<form>` element.
 
 `formGroup` is a reactive form directive that takes an existing
 `FormGroup` instance and associates it with an HTML element.
 In this case, it associates the `FormGroup` you saved as
-`heroForm` with the form element.
+`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
+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
+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
@@ -388,34 +409,14 @@ in the class. This syntax tells Angular to look for the parent
 to look for a `FormControl` called `name`.
 
 
-<div class="l-sub-section">
-
-
-
-Disregard the `form-group` _CSS_ class. It belongs to the
-<a href="http://getbootstrap.com/" title="Bootstrap CSS">Bootstrap CSS library</a>,
-not Angular.
-Like the `form-control` class, it _styles_ the form
-but in no way impacts its logic.
-
-
-
-</div>
-
-
-
-The form looks great. But does it work?
-When the user enters a name, where does the value go?
-
-
 {@a json}
 
-
 ## Taking a look at the form model
 
-The value goes into the **_form model_** that backs the group's `FormControls`.
+When the user enters data into an `<input>`, the value
+goes into the **_form model_**.
 To see the form model, add the following line after the
-closing `form` tag in the `hero-detail.component.html`:
+closing `<form>` tag in the `hero-detail.component.html`:
 
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-2.component.html" region="form-value-json" title="src/app/hero-detail/hero-detail.component.html" linenums="false">
@@ -423,7 +424,6 @@ closing `form` tag in the `hero-detail.component.html`:
 </code-example>
 
 
-
 The `heroForm.value` returns the _form model_.
 Piping it through the `JsonPipe` renders the model as JSON in the browser:
 
@@ -432,45 +432,33 @@ Piping it through the `JsonPipe` renders the model as JSON in the browser:
   <img src="generated/images/guide/reactive-forms/json-output.png" alt="JSON output">
 </figure>
 
-
-
 The initial `name` property value is the empty string.
-Type into the _name_ input box and watch the keystokes appear in the JSON.
-
-
-
-
-Great! You have the basics of a form.
+Type into the name `<input>` and watch the keystrokes appear in the JSON.
 
 In real life apps, forms get big fast.
 `FormBuilder` makes form development and maintenance easier.
 
 
-
-
 {@a formbuilder}
 
-
-## Introduction to _FormBuilder_
+## Introduction to `FormBuilder`
 
 The `FormBuilder` class helps reduce repetition and
 clutter by handling details of control creation for you.
 
-To use `FormBuilder`, you need to import it into `hero-detail.component.ts`:
+To use `FormBuilder`, import it into `hero-detail.component.ts`. You can remove `FormControl`:
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-3a.component.ts" region="imports" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
-
-
-Use it now to refactor the `HeroDetailComponent` into something that's a little easier to read and write,
+Use it to refactor the `HeroDetailComponent` into something that's easier to read and write,
 by following this plan:
 
 * Explicitly declare the type of the `heroForm` property to be `FormGroup`; you'll initialize it later.
 * Inject a `FormBuilder` into the constructor.
-* Add a new method that uses the `FormBuilder` to define the `heroForm`; call it `createForm`.
-* Call `createForm` in the constructor.
+* Add a new method that uses the `FormBuilder` to define the `heroForm`; call it `createForm()`.
+* Call `createForm()` in the constructor.
 
 The revised `HeroDetailComponent` looks like this:
 
@@ -484,14 +472,11 @@ The revised `HeroDetailComponent` looks like this:
 `FormBuilder.group` takes an object whose keys and values are `FormControl` names and their definitions.
 In this example, the `name` control is defined by its initial data value, an empty string.
 
-Defining a group of controls in a single object makes for a compact, readable style.
-It beats writing an equivalent series of `new FormControl(...)` statements.
-
+Defining a group of controls in a single object makes your code more compact and readable because you don't have to write repeated `new FormControl(...)` statements.
 
 {@a validators}
 
-
-### Validators.required
+### `Validators.required`
 Though this guide doesn't go deeply into validations, here is one example that
 demonstrates the simplicity of using `Validators.required` in reactive forms.
 
@@ -517,98 +502,72 @@ the second is the required validator, `Validators.required`.
 
 <div class="l-sub-section">
 
-
-
 Reactive validators are simple, composable functions.
-Configuring validation is harder in template-driven forms where you must wrap validators in a directive.
+Configuring validation is different in template-driven forms in that you must wrap validators in a directive.
 
 </div>
 
-
-
 Update the diagnostic message at the bottom of the template to display the form's validity status.
 
-
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-3.component.html" region="form-value-json" title="src/app/hero-detail/hero-detail.component.html (excerpt)" linenums="false">
 
 </code-example>
 
-
-
 The browser displays the following:
 
-
 <figure>
   <img src="generated/images/guide/reactive-forms/validators-json-output.png" alt="Single FormControl">
 </figure>
 
-
-
-`Validators.required` is working. The status is `INVALID` because the input box has no value.
-Type into the input box to see the status change from `INVALID` to `VALID`.
+`Validators.required` is working. The status is `INVALID` because the `<input>` has no value.
+Type into the `<input>` to see the status change from `INVALID` to `VALID`.
 
 In a real app, you'd replace the diagnosic message with a user-friendly experience.
 
-
 Using `Validators.required` is optional for the rest of the guide.
 It remains in each of the following examples with the same configuration.
 
 For more on validating Angular forms, see the
 [Form Validation](guide/form-validation) guide.
 
+### More `FormControl`s
 
-### More FormControls
-A hero has more than a name.
-A hero has an address, a super power and sometimes a sidekick too.
+This section adds additional `FormControl`s for the address, a super power, and a sidekick.
 
-The address has a state property. The user will select a state with a `<select>` box and you'll populate
+Additionally, the address has a state property. The user will select a state with a `<select>` and you'll populate
 the `<option>` elements with states. So import `states` from `data-model.ts`.
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-4.component.ts" region="imports" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
-
-
 Declare the `states` property and add some address `FormControls` to the `heroForm` as follows.
 
-
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-4.component.ts" region="v4" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
-
-
-Then add corresponding markup in `hero-detail.component.html`
-within the `form` element.
-
+Then add corresponding markup in `hero-detail.component.html` as follows.
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-4.component.html" title="src/app/hero-detail/hero-detail.component.html" linenums="false">
 
 </code-example>
 
-
-
 <div class="alert is-helpful">
 
-
-
-*Reminder*: Ignore the many mentions of `form-group`,
+*Note*: Ignore the many mentions of `form-group`,
 `form-control`, `center-block`, and `checkbox` in this markup.
 Those are _bootstrap_ CSS classes that Angular itself ignores.
 Pay attention to the `[formGroup]` and `formControlName` attributes.
 They are the Angular directives that bind the HTML controls to the
 Angular `FormGroup` and `FormControl` properties in the component class.
 
-
 </div>
 
+The revised template includes more text `<input>` elements, a `<select>` for the `state`, radio buttons for the `power`,
+and a `<checkbox>` for the `sidekick`.
 
-
-The revised template includes more text inputs, a select box for the `state`, radio buttons for the `power`,
-and a checkbox for the `sidekick`.
-
-You must bind the option's value property with `[value]="state"`.
+You must bind the value property of the `<option>` with `[value]="state"`.
 If you do not bind the value, the select shows the first option from the data model.
 
 The component _class_ defines control properties without regard for their representation in the template.
@@ -628,16 +587,15 @@ See the API reference for more information about
 
 ### Nested FormGroups
 
-This form is getting big and unwieldy. You can group some of the related `FormControls`
-into a nested `FormGroup`. The `street`, `city`, `state`, and `zip` are properties
-that would make a good _address_ `FormGroup`.
+To manage the size of the form more effectively, you can group some of the related `FormControls`
+into a nested `FormGroup`. For example, the `street`, `city`, `state`, and `zip` are ideal properties for an address `FormGroup`.
 Nesting groups and controls in this way allows you to
 mirror the hierarchical structure of the data model
 and helps track validation and state for related sets of controls.
 
 You used the `FormBuilder` to create one `FormGroup` in this component called `heroForm`.
 Let that be the parent `FormGroup`.
-Use `FormBuilder` again to create a child `FormGroup` that encapsulates the address controls;
+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`.
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-5.component.ts" region="v5" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
@@ -646,15 +604,15 @@ assign the result to a new `address` property of the parent `FormGroup`.
 
 
 
-You’ve changed the structure of the form controls in the component class;
+When you change the structure of the form controls in the component class,
 you must make corresponding adjustments to the component template.
 
-In `hero-detail.component.html`, wrap the address-related `FormControls` in a `div`.
+In `hero-detail.component.html`, wrap the address-related `FormControls` in a `<div>`.
 Add a `formGroupName` directive to the `div` and bind it to `"address"`.
-That's the property of the _address_ child `FormGroup` within the parent `FormGroup` called `heroForm`.
+That's the property of the `address` child `FormGroup` within the parent `FormGroup` called `heroForm`. Leave the `<div>` with the `name` `<input>`.
 
-To make this change visually obvious, slip in an `<h4>` header near the top with the text, _Secret Lair_.
-The new _address_ HTML looks like this:
+To make this change visually obvious, add an `<h4>` header near the top with the text, _Secret Lair_.
+The new address HTML looks like this:
 
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-5.component.html" region="add-group" title="src/app/hero-detail/hero-detail.component.html (excerpt)" linenums="false">
@@ -662,51 +620,42 @@ The new _address_ HTML looks like this:
 </code-example>
 
 
-
-After these changes, the JSON output in the browser shows the revised _form model_
+After these changes, the JSON output in the browser shows the revised form model
 with the nested address `FormGroup`:
 
-
 <figure>
   <img src="generated/images/guide/reactive-forms/address-group.png" alt="JSON output">
 </figure>
 
-
-
-Great! You’ve made a group and you can see that the template
+This shows that the template
 and the form model are talking to one another.
 
-
-
 {@a properties}
 
+## Inspect `FormControl` Properties
 
-## Inspect _FormControl_ Properties
-At the moment, you're dumping the entire form model onto the page.
-Sometimes you're interested only in the state of one particular `FormControl`.
-
-You can inspect an individual `FormControl` within a form by extracting it with the `.get()` method.
-You can do this _within_ the component class or display it on the
+You can inspect an individual `FormControl` within a form by extracting it with the `get()` method.
+You can do this within the component class or display it on the
 page by adding the following to the template,
 immediately after the `{{form.value | json}}` interpolation as follows:
 
-
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-5.component.html" region="inspect-value" title="src/app/hero-detail/hero-detail.component.html" linenums="false">
 
 </code-example>
 
-
-
-To get the state of a `FormControl` that’s inside a `FormGroup`, use dot notation to path to the control.
-
+To get the state of a `FormControl` that’s inside a `FormGroup`, use dot notation to traverse to the control.
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-5.component.html" region="inspect-child-control" title="src/app/hero-detail/hero-detail.component.html" linenums="false">
 
 </code-example>
 
+<div class="alert is-helpful">
 
+*Note*: If you're coding along, remember to remove this reference to `address.street` when you get to the section on `FormArray`. In that section, you change the name of address in the component class and it will throw an error if you leave it in the template.
 
-You can use this technique to display _any_ property of a `FormControl`
+</div>
+
+You can use this technique to display any property of a `FormControl`
 such as one of the following:
 
 <style>
@@ -801,7 +750,7 @@ such as one of the following:
 
 
 
-Learn about other `FormControl` properties in the
+Read about other `FormControl` properties in the
 [_AbstractControl_](api/forms/AbstractControl) API reference.
 
 One common reason for inspecting `FormControl` properties is to
@@ -809,48 +758,43 @@ make sure the user entered valid values.
 Read more about validating Angular forms in the
 [Form Validation](guide/form-validation) guide.
 
-
-
 {@a data-model-form-model}
 
-
-## The _data model_ and the _form model_
+## The data model and the form model
 
 At the moment, the form is displaying empty values.
 The `HeroDetailComponent` should display values of a hero,
 possibly a hero retrieved from a remote server.
 
-In this app, the `HeroDetailComponent` gets its hero from a parent `HeroListComponent`
+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_.
+The component must copy the hero values in the data model into the form model.
 There are two important implications:
 
-1. The developer must understand how the properties of the _data model_
-map to the properties of the _form model_.
+1. The developer must understand how the properties of the data model
+map to the properties of the form model.
+
+2. User changes flow from the DOM elements to the form model, not to the data model.
 
-2. User changes flow from the DOM elements to the _form model_, not to the _data model_.
 The form controls never update the _data model_.
 
-The _form_ and _data_ model structures need not match exactly.
-You often present a subset of the _data model_ on a particular screen.
-But it makes things easier if the shape of the _form model_ is close to the shape of the _data model_.
+The form and data model structures don't need to match exactly.
+You often present a subset of the data model on a particular screen.
+But it makes things easier if the shape of the form model is close to the shape of the data model.
 
 In this `HeroDetailComponent`, the two models are quite close.
 
-Recall the definition of `Hero` in `data-model.ts`:
+Here are the definitions of `Hero` and `Address` in `data-model.ts`:
 
 <code-example path="reactive-forms/src/app/data-model.ts" region="model-classes" title="src/app/data-model.ts (classes)" linenums="false">
 
 </code-example>
 
-
-
 Here, again, is the component's `FormGroup` definition.
 
-
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-6.component.ts" region="hero-form-model" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
@@ -862,73 +806,68 @@ There are two significant differences between these models:
 1. The `Hero` has an `id`. The form model does not because you generally don't show primary keys to users.
 
 1. The `Hero` has an array of addresses. This form model presents only one address,
-a choice [revisited below](guide/reactive-forms#form-array "Form arrays").
+which is covered in the section on [`FormArray`](guide/reactive-forms#form-array "Form arrays") below.
 
-Nonetheless, the two models are pretty close in shape and you'll see in a moment how this alignment facilitates copying the _data model_ properties
-to the _form model_ with the `patchValue` and `setValue` methods.
+Keeping the two models close in shape facilitates copying the data model properties
+to the form model with the `patchValue()` and `setValue()` methods in the next section.
 
 
-Take a moment to refactor the _address_ `FormGroup` definition for brevity and clarity as follows:
+First, refactor the `address` `FormGroup` definition as follows:
 
-<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="address-form-group" title="src/app/hero-detail/hero-detail-7.component.ts" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="address-form-group" title="src/app/hero-detail/hero-detail.component.ts" linenums="false">
 
 </code-example>
 
 
+Also be sure to update the `import` from `data-model` so you can reference the `Hero` and `Address` classes:
 
-Also be sure to update the import from `data-model` so you can reference the `Hero` and `Address` classes:
-
-<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="import-address" title="src/app/hero-detail/hero-detail-7.component.ts" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="import-address" title="src/app/hero-detail/hero-detail.component.ts" linenums="false">
 
 </code-example>
 
-
-
-
 {@a set-data}
 
+## Populate the form model with `setValue()` and `patchValue()`
 
-## Populate the form model with _setValue_ and _patchValue_
-Previously you created a control and initialized its value at the same time.
-You can also initialize or reset the values _later_ with the
-`setValue` and `patchValue` methods.
+<div class="alert is-helpful">
 
-### _setValue_
-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`.
+*Note*: If you're coding along, this section is optional as the rest of the steps do not rely on it.
 
+</div>
+
+Previously, you created a control and initialized its value at the same time.
+You can also initialize or reset the values later with the
+`setValue()` and `patchValue()` methods.
+
+### `setValue()`
+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`.
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="set-value" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
 
 </code-example>
 
+The `setValue()` method checks the data object thoroughly before assigning any form control values.
 
-
-The `setValue` method checks the data object thoroughly before assigning any form control values.
-
-It will not accept a data object that doesn't match the FormGroup structure or is
+It will not accept a data object that doesn't match the `FormGroup` structure or is
 missing values for any control in the group. This way, it can return helpful
 error messages if you have a typo or if you've nested controls incorrectly.
-`patchValue` will fail silently.
+Conversely, `patchValue()` will fail silently.
 
-On the other hand,`setValue` will catch
-the error and report it clearly.
-
-Notice that you can _almost_ use the entire `hero` as the argument to `setValue`
+Notice that you can almost use the entire `hero` as the argument to `setValue()`
 because its shape is similar to the component's `FormGroup` structure.
 
-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:
+You can only show the hero's first address and you must account for the possibility that the `hero` has no addresses at all, as in the conditional setting of the `address` property in the data object argument:
 
-<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="set-value-address" title="src/app/hero-detail/hero-detail-7.component.ts" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="set-value-address" title="src/app/hero-detail/hero-detail.component.ts" linenums="false">
 
 </code-example>
 
 
 
-### _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.
+### `patchValue()`
+With **`patchValue()`**, you can assign values to specific controls in a `FormGroup`
+by supplying an object of key/value pairs for them.
 
 This example sets only the form's `name` control.
 
@@ -938,89 +877,18 @@ This example sets only the form's `name` control.
 
 
 
-With **`patchValue`** you have more flexibility to cope with wildly divergent data and form models.
-But unlike `setValue`,  `patchValue` cannot check for missing control
-values and does not throw helpful errors.
-
-### When to set form model values (_ngOnChanges_)
-
-Now you know _how_ to set the _form model_ values. But _when_ do you set them?
-The answer depends upon when the component gets the _data model_ values.
-
-The `HeroDetailComponent` in this reactive forms sample is nested within a _master/detail_ `HeroListComponent` ([discussed below](guide/reactive-forms#hero-list)).
-The `HeroListComponent` displays hero names to the user.
-When the user clicks on a hero, the list component passes the selected hero into the `HeroDetailComponent`
-by binding to its `hero` input property.
-
-
-<code-example path="reactive-forms/src/app/hero-list/hero-list.component.1.html" title="hero-list.component.html (simplified)" linenums="false">
-
-</code-example>
-
-
-
-In this approach, the value of `hero` in the `HeroDetailComponent` changes
-every time the user selects a new hero.
-You should call  _setValue_ in the [ngOnChanges](guide/lifecycle-hooks#onchanges)
-hook, which Angular calls whenever the input `hero` property changes
-as the following steps demonstrate.
-
-First, import the `OnChanges` and `Input` symbols in `hero-detail.component.ts`.
-
-
-<code-example path="reactive-forms/src/app/hero-detail/hero-detail-6.component.ts" region="import-input" title="src/app/hero-detail/hero-detail.component.ts (core imports)" linenums="false">
-
-</code-example>
-
-
-
-Add the `hero` input property.
-
-<code-example path="reactive-forms/src/app/hero-detail/hero-detail-6.component.ts" region="hero" title="src/app/hero-detail/hero-detail-6.component.ts" linenums="false">
-
-</code-example>
-
-
-
-Add the `ngOnChanges` method to the class as follows:
-
-
-<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="ngOnChanges-1" title="src/app/hero-detail/hero-detail.component.ts (ngOnchanges)" linenums="false">
-
-</code-example>
-
-
-
-### _reset_ the form flags
-
-You should  reset the form when the hero changes so that
-control values from the previous hero are cleared and
-status flags are restored to the _pristine_ state.
-You could call `reset` at the top of `ngOnChanges` like this.
-
-<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="reset" title="src/app/hero-detail/hero-detail-7.component.ts" linenums="false">
-
-</code-example>
-
-
-
-The `reset` method has an optional `state` value so you can reset the flags _and_ the control values at the same time.
-Internally, `reset` passes the argument to `setValue`.
-A little refactoring and `ngOnChanges` becomes this:
-
-<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="ngOnChanges" title="src/app/hero-detail/hero-detail.component.ts (ngOnchanges - revised)" linenums="false">
-
-</code-example>
-
+With `patchValue()` you have more flexibility to cope with divergent data and form models.
+But unlike `setValue()`,  `patchValue()` cannot check for missing control
+values and doesn't throw helpful errors.
 
 
 {@a hero-list}
 
+## Create the `HeroListComponent` and `HeroService`
 
-### Create the _HeroListComponent_ and _HeroService_
+To demonstrate further reactive forms techniques, it is helpful to add more functionality to the example by adding a `HeroListComponent` and a `HeroService`.
 
-The `HeroDetailComponent` is a nested sub-component of the `HeroListComponent` in a _master/detail_ view.
-Together they look a bit like this:
+The `HeroDetailComponent` is a nested sub-component of the `HeroListComponent` in a _master/detail_ view. Together they look like this:
 
 
 <figure>
@@ -1028,6 +896,34 @@ Together they look a bit like this:
 </figure>
 
 
+First, add a `HeroListComponent` with the following command:
+
+<code-example language="sh" class="code-shell">
+
+  ng generate component HeroList
+
+</code-example>
+
+Give the `HeroListComponent` the following contents:
+
+<code-example path="reactive-forms/src/app/hero-list/hero-list.component.ts" title="hero-list.component.ts" linenums="false">
+
+</code-example>
+
+
+Next, add a `HeroService` using the following command:
+
+<code-example language="sh" class="code-shell">
+
+  ng generate service Hero
+
+</code-example>
+
+Then, give it the following contents:
+
+<code-example path="reactive-forms/src/app/hero.service.ts" title="hero.service.ts" linenums="false">
+
+</code-example>
 
 The `HeroListComponent` uses an injected `HeroService` to retrieve heroes from the server
 and then presents those heroes to the user as a series of buttons.
@@ -1038,38 +934,106 @@ the necessarily asynchronous nature of the application.
 
 When the user clicks on a hero,
 the component sets its `selectedHero` property which
-is bound to the `hero` input property of the `HeroDetailComponent`.
-The `HeroDetailComponent` detects the changed hero and re-sets its form
+is bound to the `hero` `@Input()` property of the `HeroDetailComponent`.
+The `HeroDetailComponent` detects the changed hero and resets its form
 with that hero's data values.
 
-A "Refresh" button clears the hero list and the current selected hero before refetching the heroes.
+A refresh button clears the hero list and the current selected hero before refetching the heroes.
 
-The remaining `HeroListComponent` and `HeroService` implementation details are not relevant to understanding reactive forms.
-The techniques involved are covered elsewhere in the documentation, including the _Tour of Heroes_
-[here](tutorial/toh-pt3 "ToH: Multiple Components") and [here](tutorial/toh-pt4 "ToH: Services").
-
-If you're coding along with the steps in this reactive forms tutorial,
-generate the pertinent files based on the
-[source code displayed below](guide/reactive-forms#source-code "Reactive Forms source code").
 Notice that `hero-list.component.ts` imports `Observable` and `finally` while `hero.service.ts` imports `Observable`, `of`,
 and `delay` from `rxjs`.
-Then return here to learn about _form array_ properties.
+
+The remaining `HeroListComponent` and `HeroService` implementation details are beyond the scope of this tutorial.
+However, the techniques involved are covered elsewhere in the documentation, including the _Tour of Heroes_
+[here](tutorial/toh-pt3 "ToH: Multiple Components") and [here](tutorial/toh-pt4 "ToH: Services").
+
+To use the `HeroService`, import it into `AppModule` and add it to the `providers` array. To use the `HeroListComponent`, import it, declare it, and export it:
+
+<code-example path="reactive-forms/src/app/app.module.ts" region="hero-service-list" title="app.module.ts (excerpts)" linenums="false">
+
+</code-example>
 
 
+Next, update the `HeroListComponent` template with the following:
+
+<code-example path="reactive-forms/src/app/hero-list/hero-list.component.html" title="hero-list.component.html" linenums="false">
+
+</code-example>
+
+These changes need to be reflected in the `AppComponent` template. Replace the contents of `app.component.html` with updated markup to use the `HeroListComponent`, instead of the `HeroDetailComponent`:
+
+<code-example path="reactive-forms/src/app/app.component.html" title="app.component.html" linenums="false">
+
+</code-example>
+
+
+Finally, add an `@Input()` property to the `HeroDetailComponent`
+so `HeroDetailComponent` can receive the data from `HeroListComponent`. Remember to add the `Input` symbol to the `@angular/core `  `import` statement in the list of JavaScript imports too.
+
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-6.component.ts" region="hero" title="hero-detail.component.ts (excerpt)" linenums="false">
+
+</code-example>
+
+Now you should be able to click on a button for a hero and a form renders.
+
+## When to set form model values (`ngOnChanges`)
+
+When to set form model values depends upon when the component gets the data model values.
+
+The `HeroListComponent` displays hero names to the user.
+When the user clicks on a hero, the `HeroListComponent` passes the selected hero into the `HeroDetailComponent`
+by binding to its `hero` `@Input()` property.
+
+<code-example path="reactive-forms/src/app/hero-list/hero-list.component.1.html" title="hero-list.component.html (simplified)" linenums="false">
+
+</code-example>
+
+In this approach, the value of `hero` in the `HeroDetailComponent` changes
+every time the user selects a new hero.
+You can call `setValue()` using the [ngOnChanges](guide/lifecycle-hooks#onchanges)
+lifecycle hook, which Angular calls whenever the `@Input()` `hero` property changes.
+
+### Reset the form
+
+First, import the `OnChanges` symbol in `hero-detail.component.ts`.
+
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-6.component.ts" region="import-input" title="src/app/hero-detail/hero-detail.component.ts (core imports)" linenums="false">
+
+</code-example>
+
+Next, let Angular know that the `HeroDetailComponent` implements `OnChanges`:
+
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail.component.ts" region="onchanges-implementation" title="src/app/hero-detail/hero-detail.component.ts (excerpt)" linenums="false">
+
+</code-example>
+
+
+Add the `ngOnChanges` method to the class as follows:
+
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="ngOnChanges" title="src/app/hero-detail/hero-detail.component.ts (ngOnchanges)" linenums="false">
+
+</code-example>
+
+Notice that it calls `rebuildForm()`, which is a method where you
+can set the values. You can name `rebuildForm()` anything that makes sense to you. It isn't built into Angular, but is a method you create to effectively leverage the `ngOnChanges` lifecycle hook.
+
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="rebuildForm" title="src/app/hero-detail/hero-detail.component.ts" linenums="false">
+
+</code-example>
+
+The `rebuildForm()` method does two things; resets the hero's name and the address.
 
 {@a form-array}
 
-
-## Use _FormArray_ to present an array of _FormGroups_
-So far, you've seen `FormControls` and `FormGroups`.
+## Use _FormArray_ to present an array of `FormGroups`
 A `FormGroup` is a named object whose property values are `FormControls` and other `FormGroups`.
 
 Sometimes you need to present an arbitrary number of controls or groups.
 For example, a hero may have zero, one, or any number of addresses.
 
 The `Hero.addresses` property is an array of `Address` instances.
-An _address_ `FormGroup` can display one `Address`.
-An Angular `FormArray` can display an array of _address_ `FormGroups`.
+An `address`  `FormGroup` can display one `Address`.
+An Angular `FormArray` can display an array of `address`  `FormGroups`.
 
 To get access to the `FormArray` class, import it into `hero-detail.component.ts`:
 
@@ -1077,120 +1041,117 @@ To get access to the `FormArray` class, import it into `hero-detail.component.ts
 
 </code-example>
 
+To work with a `FormArray` do the following:
 
+1. Define the items in the array; that is, `FormControls` or `FormGroups`.
 
-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. Initialize the array with items created from data in the data model.
 
 1. Add and remove items as the user requires.
 
-In this guide, you define a `FormArray` for `Hero.addresses` and
-let the user add or modify addresses (removing addresses is your homework).
+Define a `FormArray` for `Hero.addresses` and
+let the user add or modify addresses.
 
-You’ll need to redefine the form model in the `HeroDetailComponent` constructor,
-which currently only displays the first hero address in an _address_ `FormGroup`.
+You’ll need to redefine the form model in the `HeroDetailComponent` `createForm()` method,
+which currently only displays the first hero address in an `address` `FormGroup`:
 
-<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="address-form-group" title="src/app/hero-detail/hero-detail-7.component.ts" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-7.component.ts" region="address-form-group" title="src/app/hero-detail/hero-detail.component.ts" linenums="false">
 
 </code-example>
 
-
-
-### From _address_ to _secret lairs_
+### From `address` to `secretLairs`
 
 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:
+Addresses are for mere mortals. Heroes have _secret lairs_!
+Replace the address `FormGroup` definition with a `secretLairs`  `FormArray` definition:
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.ts" region="secretLairs-form-array" title="src/app/hero-detail/hero-detail-8.component.ts" linenums="false">
 
 </code-example>
 
+In `hero-detail.component.html` change `formArrayName="address"` to `formArrayName="secretLairs"`.
 
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.html" region="form-array-name" title="src/app/hero-detail/hero-detail.component.ts" linenums="false">
+
+</code-example>
 
 <div class="alert is-helpful">
 
-
-
-Changing the form control name from `address` to `secretLairs` drives home an important point:
+Changing the form control name from `address` to `secretLairs` underscores an important point:
 the _form model_ doesn't have to match the _data model_.
 
-Obviously there has to be a relationship between the two.
+Obviously, there has to be a relationship between the two.
 But it can be anything that makes sense within the application domain.
 
 _Presentation_ requirements often differ from _data_ requirements.
 The reactive forms approach both emphasizes and facilitates this distinction.
 
-
 </div>
 
-
-
-### Initialize the "secretLairs" _FormArray_
+### Initialize the `secretLairs` _FormArray_
 
 The default form displays a nameless hero with no addresses.
 
-You need a method to populate (or repopulate) the _secretLairs_ with actual hero addresses whenever
-the parent `HeroListComponent` sets the `HeroDetailComponent.hero` input property to a new `Hero`.
+You need a method to populate (or repopulate) the `secretLairs` with actual hero addresses whenever
+the parent `HeroListComponent` sets the `HeroDetailComponent.hero`  `@Input()` property to a new `Hero`.
 
-The following `setAddresses` method replaces the _secretLairs_ `FormArray` with a new `FormArray`,
-initialized by an array of hero address `FormGroups`.
+The following `setAddresses()` method replaces the `secretLairs`  `FormArray` with a new `FormArray`,
+initialized by an array of hero address `FormGroups`. Add this to the `HeroDetailComponent` class:
 
-<code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.ts" region="set-addresses" title="src/app/hero-detail/hero-detail-8.component.ts" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.ts" region="set-addresses" title="src/app/hero-detail/hero-detail.component.ts" linenums="false">
 
 </code-example>
 
-
-
-Notice that you replace the previous `FormArray` with the **`FormGroup.setControl` method**, not with `setValue`.
+Notice that you replace the previous `FormArray` with the
+`FormGroup.setControl()` method, not with `setValue()`.
 You're replacing a _control_, not the _value_ of a control.
 
-Notice also that the _secretLairs_ `FormArray` contains **`FormGroups`**, not `Addresses`.
+Notice also that the `secretLairs`  `FormArray` contains `FormGroups`, not `Addresses`.
 
-### Get the _FormArray_
-The `HeroDetailComponent` should be able to display, add, and remove items from the _secretLairs_ `FormArray`.
+Next, call `setAddresses()` from within `rebuildForm()`:
 
-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.
-
-<code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.ts" region="get-secret-lairs" title="src/app/hero-detail/hero-detail.component.ts (secretLayers property)" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.ts" region="rebuildform" title="src/app/hero-detail/hero-detail.component.ts" linenums="false">
 
 </code-example>
 
 
+### Get the _FormArray_
+The `HeroDetailComponent` should be able to display, add, and remove items from the `secretLairs`  `FormArray`.
+
+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. Add the following to `HeroDetailComponent`.
+
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.ts" region="get-secret-lairs" title="src/app/hero-detail/hero-detail.component.ts (secretLairs property)" linenums="false">
+
+</code-example>
 
 ### Display the _FormArray_
 
-The current HTML template displays a single _address_ `FormGroup`.
-Revise it to display zero, one, or more of the hero's _address_ `FormGroups`.
+The current HTML template displays a single `address` `FormGroup`.
+Revise it to display zero, one, or more of the hero's `address`  `FormGroups`.
 
 This is mostly a matter of wrapping the previous template HTML for an address in a `<div>` and
 repeating that `<div>` with `*ngFor`.
 
-The trick lies in knowing how to write the `*ngFor`. There are three key points:
+There are three key points when writing the `*ngFor`:
 
 1. Add another wrapping `<div>`, around the `<div>` with `*ngFor`, and
 set its `formArrayName` directive to `"secretLairs"`.
-This step establishes the _secretLairs_ `FormArray` as the context for form controls in the inner, repeated HTML template.
+This step establishes the `secretLairs`  `FormArray` as the context for form controls in the inner, repeated HTML template.
 
 1. The source of the repeated items is the `FormArray.controls`, not the `FormArray` itself.
-Each control is an _address_ `FormGroup`, exactly what the previous (now repeated) template HTML expected.
+Each control is an `address`  `FormGroup`, exactly what the previous (now repeated) template HTML expected.
 
-1. Each repeated `FormGroup` needs a unique `formGroupName` which must be the index of the `FormGroup` in the `FormArray`.
+1. Each repeated `FormGroup` needs a unique `formGroupName`, which must be the index of the `FormGroup` in the `FormArray`.
 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:
+Here's the skeleton for the secret lairs section of the HTML template:
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.html" region="form-array-skeleton" title="src/app/hero-detail/hero-detail.component.html (*ngFor)" linenums="false">
 
 </code-example>
 
-
-
-Here's the complete template for the _secret lairs_ section:
+Here's the complete template for the secret lairs section. Add this to `HeroDetailComponent` template, replacing the `forGroupName=address`  `<div>`:
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.html" region="form-array" title="src/app/hero-detail/hero-detail.component.html (excerpt)">
 
@@ -1200,51 +1161,38 @@ Here's the complete template for the _secret lairs_ section:
 
 ### Add a new lair to the _FormArray_
 
-Add an `addLair` method that gets the _secretLairs_ `FormArray` and appends a new _address_ `FormGroup` to it.
+Add an `addLair()` method that gets the `secretLairs`  `FormArray` and appends a new `address`  `FormGroup` to it.
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.ts" region="add-lair" title="src/app/hero-detail/hero-detail.component.ts (addLair method)" linenums="false">
 
 </code-example>
 
-
-
-Place a button on the form so the user can add a new _secret lair_ and wire it to the component's `addLair` method.
-
+Place a button on the form so the user can add a new _secret lair_ and wire it to the component's `addLair()` method. Put it just before the closing `</div>` of the `secretLairs`  `FormArray`.
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.html" region="add-lair" title="src/app/hero-detail/hero-detail.component.html (addLair button)" linenums="false">
 
 </code-example>
 
-
-
 <div class="alert is-important">
 
-
-
-Be sure to **add the `type="button"` attribute**.
-In fact, you should always specify a button's `type`.
-Without an explicit type, the button type defaults to "submit".
-When you later add a _form submit_ action, every "submit" button triggers the submit action which
+Be sure to add the `type="button"` attribute 
+because without an explicit type, the button type defaults to "submit".
+When you later add a form submit action, every "submit" button triggers the submit action which
 might do something like save the current changes.
 You do not want to save changes when the user clicks the _Add a Secret Lair_ button.
 
-
 </div>
 
-
-
 ### Try it!
 
 Back in the browser, select the hero named "Magneta".
 "Magneta" doesn't have an address, as you can see in the diagnostic JSON at the bottom of the form.
 
-
 <figure>
   <img src="generated/images/guide/reactive-forms/addresses-array.png" alt="JSON output of addresses array">
 </figure>
 
 
-
 Click the "_Add a Secret Lair_" button.
 A new address section appears. Well done!
 
@@ -1253,40 +1201,33 @@ A new address section appears. Well done!
 This example can _add_ addresses but it can't _remove_ them.
 For extra credit, write a `removeLair` method and wire it to a button on the repeating address HTML.
 
-
-
 {@a observe-control}
 
-
 ## Observe control changes
 
-Angular calls `ngOnChanges` when the user picks a hero in the parent `HeroListComponent`.
-Picking a hero changes the `HeroDetailComponent.hero` input property.
+Angular calls `ngOnChanges()` when the user picks a hero in the parent `HeroListComponent`.
+Picking a hero changes the `HeroDetailComponent.hero`  `@Input()` property.
 
-Angular does _not_ call `ngOnChanges` when the user modifies the hero's _name_ or _secret lairs_.
-Fortunately, you can learn about such changes by subscribing to one of the form control properties
+Angular does _not_ call `ngOnChanges()` when the user modifies the hero's `name` or `secretLairs`.
+Fortunately, you can learn about such changes by subscribing to one of the `FormControl` properties
 that raises a change event.
 
 These are properties, such as `valueChanges`, that return an RxJS `Observable`.
 You don't need to know much about RxJS `Observable` to monitor form control values.
 
-Add the following method to log changes to the value of the _name_ `FormControl`.
+Add the following method to log changes to the value of the `name` `FormControl`.
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail.component.ts" region="log-name-change" title="src/app/hero-detail/hero-detail.component.ts (logNameChange)" linenums="false">
 
 </code-example>
 
+Call it in the constructor, after `createForm()`.
 
-
-Call it in the constructor, after creating the form.
-
-<code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.ts" region="ctor" title="src/app/hero-detail/hero-detail-8.component.ts" linenums="false">
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail-8.component.ts" region="ctor" title="src/app/hero-detail/hero-detail.component.ts" linenums="false">
 
 </code-example>
 
-
-
-The `logNameChange` method pushes name-change values into a `nameChangeLog` array.
+The `logNameChange()` method pushes name-change values into a `nameChangeLog` array.
 Display that array at the bottom of the component template with this `*ngFor` binding:
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail.component.html" region="name-change-log" title="src/app/hero-detail/hero-detail.component.html (Name change log)" linenums="false">
@@ -1295,25 +1236,21 @@ Display that array at the bottom of the component template with this `*ngFor` bi
 
 
 
-Return to the browser, select a hero (e.g, "Magneta"), and start typing in the _name_ input box.
+Return to the browser, select a hero; for example, Magneta, and start typing in the `name`  `<input>`.
 You should see a new name in the log after each keystroke.
 
 ### When to use it
 
-An interpolation binding is the easier way to _display_ a name change.
-Subscribing to an observable form control property is handy for triggering
-application logic _within_ the component class.
-
-
+An interpolation binding is the easier way to display a name change.
+Subscribing to an observable `FormControl` property is handy for triggering
+application logic within the component class.
 
 {@a save}
 
-
 ## Save form data
 
 The `HeroDetailComponent` captures user input but it doesn't do anything with it.
-In a real app, you'd probably save those hero changes.
-In a real app, you'd also be able to revert unsaved changes and resume editing.
+In a real app, you'd probably save those hero changes, revert unsaved changes, and resume editing.
 After you implement both features in this section, the form will look like this:
 
 
@@ -1324,31 +1261,37 @@ After you implement both features in this section, the form will look like this:
 
 
 ### Save
-In this sample application, when the user submits the form,
+When the user submits the form,
 the `HeroDetailComponent` will pass an instance of the hero _data model_
-to a save method on the injected `HeroService`.
+to a save method on the injected `HeroService`. Add the following to `HeroDetailComponent`.
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail.component.ts" region="on-submit" title="src/app/hero-detail/hero-detail.component.ts (onSubmit)" linenums="false">
 
 </code-example>
 
-
+<!-- TODO: Need to add `private heroService: HeroService` to constructor and import the HeroService. Remove novalidate-->
 
 This original `hero` had the pre-save values. The user's changes are still in the _form model_.
 So you create a new `hero` from a combination of original hero values (the `hero.id`)
-and deep copies of the changed form model values, using the `prepareSaveHero` helper.
+and deep copies of the changed form model values, using the `prepareSaveHero()` helper.
 
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail.component.ts" region="prepare-save-hero" title="src/app/hero-detail/hero-detail.component.ts (prepareSaveHero)" linenums="false">
 
 </code-example>
 
+Make sure to import `HeroService` and add it to the constructor:
 
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail.component.ts" region="import-service" title="src/app/hero-detail/hero-detail.component.ts (prepareSaveHero)" linenums="false">
+
+</code-example>
+
+<code-example path="reactive-forms/src/app/hero-detail/hero-detail.component.ts" region="ctor" title="src/app/hero-detail/hero-detail.component.ts (prepareSaveHero)" linenums="false">
+
+</code-example>
 
 <div class="l-sub-section">
 
-
-
 **Address deep copy**
 
 Had you assigned the `formModel.secretLairs` to `saveHero.addresses` (see line commented out),
@@ -1364,9 +1307,9 @@ The `prepareSaveHero` method makes copies of the form model's `secretLairs` obje
 
 
 ### Revert (cancel changes)
-The user cancels changes and reverts the form to the original state by pressing the _Revert_ button.
+The user cancels changes and reverts the form to the original state by pressing the Revert button.
 
-Reverting is easy. Simply re-execute the `ngOnChanges` method that built the _form model_ from the original, unchanged `hero` _data model_.
+Reverting is easy. Simply re-execute the `rebuildForm()` method that built the form model from the original, unchanged `hero` data model.
 
 <code-example path="reactive-forms/src/app/hero-detail/hero-detail.component.ts" region="revert" title="src/app/hero-detail/hero-detail.component.ts (revert)" linenums="false">
 
@@ -1389,24 +1332,8 @@ Clicking a button of type `"submit"` triggers the `ngSubmit` event which calls t
 Clicking the revert button triggers a call to the component's `revert` method.
 Users now can save or revert changes.
 
-This is the final step in the demo.
 Try the <live-example stackblitz="final" title="Reactive Forms (final) in Stackblitz"></live-example>.
 
-
-
-
-## Summary
-
-* How to create a reactive form component and its corresponding template.
-* How to use `FormBuilder` to simplify coding a reactive form.
-* Grouping `FormControls`.
-* Inspecting `FormControl` properties.
-* Setting data with `patchValue` and `setValue`.
-* Adding groups dynamically with `FormArray`.
-* Observing changes to the value of a `FormControl`.
-* Saving form changes.
-
-
 {@a source-code}