docs(forms): copyedits (#3149)

* - Copyedits, some from Kathy (from an early revision of the forms page).
- Removed side note detailing ngModel; now referring reader to
template-syntax page instead.

* post-review edits

Author: chalin

public/docs/_examples/forms/ts/app/hero-form.component.html

@@ -1,20 +1,19 @@
- <!-- #docplaster -->
- <!-- #docregion final -->
+<!-- #docplaster -->
+<!-- #docregion final -->
 <div class="container">
   <!-- #docregion edit-div -->
-  <div  [hidden]="submitted">
+  <div [hidden]="submitted">
     <h1>Hero Form</h1>
     <!-- #docregion ngSubmit -->
     <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
-    <!-- #enddocregion ngSubmit -->
-  <!-- #enddocregion edit-div -->
+      <!-- #enddocregion ngSubmit, edit-div -->
       <div class="form-group">
         <!-- #docregion name-with-error-msg -->
         <label for="name">Name</label>
         <input type="text" class="form-control" id="name"
                required
                [(ngModel)]="model.name" name="name"
-               #name="ngModel" >
+               #name="ngModel">
         <!-- #docregion hidden-error-msg -->
         <div [hidden]="name.valid || name.pristine"
              class="alert alert-danger">
@@ -27,15 +26,15 @@ <h1>Hero Form</h1>
       <div class="form-group">
         <label for="alterEgo">Alter Ego</label>
         <input type="text" class="form-control" id="alterEgo"
-               [(ngModel)]="model.alterEgo" name="alterEgo" >
+               [(ngModel)]="model.alterEgo" name="alterEgo">
       </div>
 
       <div class="form-group">
         <label for="power">Hero Power</label>
         <select class="form-control" id="power"
                 required
                 [(ngModel)]="model.power" name="power"
-                #power="ngModel" >
+                #power="ngModel">
           <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
         </select>
         <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
@@ -185,25 +184,25 @@ <h1>Hero Form</h1>
   <!-- EXTRA MATERIAL FOR DOCUMENTATION -->
   <hr>
   <!-- #docregion ngModelName-1 -->
-    <input type="text"  class="form-control" id="name"
+    <input type="text" class="form-control" id="name"
            required
            [(ngModel)]="model.name" name="name">
-      TODO: remove this: {{model.name}}
+    TODO: remove this: {{model.name}}
   <!-- #enddocregion ngModelName-1 -->
   <hr>
   <!-- #docregion ngModel-3-->
     <input type="text" class="form-control" id="name"
            required
            [ngModel]="model.name" name="name"
-           (ngModelChange)="model.name = $event" >
-      TODO: remove this: {{model.name}}
+           (ngModelChange)="model.name = $event">
+    TODO: remove this: {{model.name}}
   <!-- #enddocregion ngModel-3-->
   <hr>
   <!-- #docregion ngModelName-2 -->
        <input type="text" class="form-control" id="name"
          required
          [(ngModel)]="model.name" name="name"
-         #spy >
+         #spy>
        <br>TODO: remove this: {{spy.className}}
   <!-- #enddocregion ngModelName-2 -->
 

public/docs/_examples/forms/ts/app/hero-form.component.ts

@@ -1,6 +1,5 @@
 // #docplaster
-// #docregion
-// #docregion first, final
+// #docregion , v1, final
 import { Component } from '@angular/core';
 
 import { Hero }    from './hero';
@@ -26,21 +25,29 @@ export class HeroFormComponent {
   // #enddocregion final
   // TODO: Remove this when we're done
   get diagnostic() { return JSON.stringify(this.model); }
-  // #enddocregion first
+  // #enddocregion v1
 
-  // #docregion final
-  // #docregion new-hero
+  // #docregion final, new-hero
   newHero() {
     this.model = new Hero(42, '', '');
   }
-  // #enddocregion new-hero
-  // #enddocregion final
+  // #enddocregion final, new-hero
+
+  skyDog(): Hero {
+    // #docregion SkyDog
+    let myHero =  new Hero(42, 'SkyDog',
+                           'Fetch any object at any distance',
+                           'Leslie Rollover');
+    console.log('My hero is called ' + myHero.name); // "My hero is called SkyDog"
+    // #enddocregion SkyDog
+    return myHero;
+  }
+
   //////// NOT SHOWN IN DOCS ////////
 
   // Reveal in html:
   //   Name via form.controls = {{showFormControls(heroForm)}}
   showFormControls(form: any) {
-
     return form && form.controls['name'] &&
     // #docregion form-controls
     form.controls['name'].value; // Dr. IQ
@@ -49,6 +56,5 @@ export class HeroFormComponent {
 
   /////////////////////////////
 
-  // #docregion first, final
+  // #docregion v1, final
 }
-// #enddocregion first, final