docs(forms): revise prose for form.reset (#2853)

Author: wardbell

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

@@ -36,7 +36,7 @@ <h1>Hero Form</h1>
                 required
                 [(ngModel)]="model.power" name="power"
                 #power="ngModel" >
-          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
+          <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
         </select>
         <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
           Power is required
@@ -46,12 +46,18 @@ <h1>Hero Form</h1>
       <!-- #docregion submit-button -->
       <button type="submit" class="btn btn-default" [disabled]="!heroForm.form.valid">Submit</button>
       <!-- #enddocregion submit-button -->
-
-      <!-- #docregion new-hero-button -->
+      <!-- #docregion new-hero-button-form-reset -->
       <button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
-      <!-- #enddocregion new-hero-button -->
-
+      <!-- #enddocregion new-hero-button-form-reset -->
  <!-- #enddocregion final -->
+      <i>with</i> reset
+
+      &nbsp;&nbsp;
+      <!-- #docregion new-hero-button-no-reset -->
+      <button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>
+      <!-- #enddocregion new-hero-button-no-reset -->
+      <i>without</i> reset
+
      <!-- NOT SHOWN IN DOCS -->
       <div>
         <hr>
@@ -126,7 +132,7 @@ <h1>Hero Form</h1>
         <div class="form-group">
           <label for="power">Hero Power</label>
           <select class="form-control" id="power" required>
-            <option *ngFor="let p of powers" [value]="p">{{p}}</option>
+            <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
           </select>
         </div>
 
@@ -165,7 +171,7 @@ <h1>Hero Form</h1>
           <select class="form-control"  id="power"
                   required
                   [(ngModel)]="model.power" name="power">
-            <option *ngFor="let p of powers" [value]="p">{{p}}</option>
+            <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
           </select>
         </div>
 
@@ -178,12 +184,12 @@ <h1>Hero Form</h1>
 
   <!-- EXTRA MATERIAL FOR DOCUMENTATION -->
   <hr>
-  <!-- #docregion ngModel-1-->
+  <!-- #docregion ngModelName-1 -->
     <input type="text"  class="form-control" id="name"
            required
            [(ngModel)]="model.name" name="name">
       TODO: remove this: {{model.name}}
-  <!-- #enddocregion ngModel-1-->
+  <!-- #enddocregion ngModelName-1 -->
   <hr>
   <!-- #docregion ngModel-3-->
     <input type="text" class="form-control" id="name"
@@ -193,16 +199,6 @@ <h1>Hero Form</h1>
       TODO: remove this: {{model.name}}
   <!-- #enddocregion ngModel-3-->
   <hr>
-  <!-- #docregion form-reset -->
-      <button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
-  <!-- #enddocregion form-reset -->
-
-  <!-- #docregion ngModelName-1 -->
-       <input type="text" class="form-control" id="name"
-              required
-              [(ngModel)]="model.name" name="name" >
-  <!-- #enddocregion ngModelName-1 -->
-  <hr>
   <!-- #docregion ngModelName-2 -->
        <input type="text" class="form-control" id="name"
          required

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

@@ -30,11 +30,9 @@ export class HeroFormComponent {
 
   // #docregion final
   // #docregion new-hero
-  // #docregion new-hero-v1
   newHero() {
     this.model = new Hero(42, '', '');
   }
-  // #enddocregion new-hero-v1
   // #enddocregion new-hero
   // #enddocregion final
   //////// NOT SHOWN IN DOCS ////////

public/docs/_examples/forms/ts/app/main.ts

@@ -2,7 +2,4 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app.module';
 
-// Compiles the module (asynchronously) with the runtime compiler
-// which generates a compiled module factory in memory.
-// Then bootstraps with that factory, targeting the browser.
 platformBrowserDynamic().bootstrapModule(AppModule);