Fix #2066 (#2800)

Author: Wenchen Li

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

@@ -5,7 +5,7 @@
   <div  [hidden]="submitted">
     <h1>Hero Form</h1>
     <!-- #docregion ngSubmit -->
-    <form *ngIf="active" (ngSubmit)="onSubmit()" #heroForm="ngForm">
+    <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
     <!-- #enddocregion ngSubmit -->
   <!-- #enddocregion edit-div -->
       <div class="form-group">
@@ -16,7 +16,7 @@ <h1>Hero Form</h1>
                [(ngModel)]="model.name" name="name"
                #name="ngModel" >
         <!-- #docregion hidden-error-msg -->
-        <div [hidden]="name.valid || name.pristine" 
+        <div [hidden]="name.valid || name.pristine"
              class="alert alert-danger">
         <!-- #enddocregion hidden-error-msg -->
           Name is required
@@ -34,7 +34,7 @@ <h1>Hero Form</h1>
         <label for="power">Hero Power</label>
         <select class="form-control" id="power"
                 required
-                [(ngModel)]="model.power" name="power" 
+                [(ngModel)]="model.power" name="power"
                 #power="ngModel" >
           <option *ngFor="let p of powers" [value]="p">{{p}}</option>
         </select>
@@ -48,7 +48,7 @@ <h1>Hero Form</h1>
       <!-- #enddocregion submit-button -->
 
       <!-- #docregion new-hero-button -->
-      <button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>
+      <button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
       <!-- #enddocregion new-hero-button -->
 
  <!-- #enddocregion final -->
@@ -193,9 +193,9 @@ <h1>Hero Form</h1>
       TODO: remove this: {{model.name}}
   <!-- #enddocregion ngModel-3-->
   <hr>
-  <!-- #docregion form-active -->
-  <form *ngIf="active">
-  <!-- #enddocregion form-active -->
+  <!-- #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"
@@ -210,6 +210,5 @@ <h1>Hero Form</h1>
          #spy >
        <br>TODO: remove this: {{spy.className}}
   <!-- #enddocregion ngModelName-2 -->
-  </form>
 
 </div>

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

@@ -29,20 +29,10 @@ export class HeroFormComponent {
   // #enddocregion first
 
   // #docregion final
-  // Reset the form with a new hero AND restore 'pristine' class state
-  // by toggling 'active' flag which causes the form
-  // to be removed/re-added in a tick via NgIf
-  // TODO: Workaround until NgForm has a reset method (#6822)
   // #docregion new-hero
-  active = true;
-
   // #docregion new-hero-v1
   newHero() {
     this.model = new Hero(42, '', '');
-  // #enddocregion new-hero-v1
-    this.active = false;
-    setTimeout(() => this.active = true, 0);
-  // #docregion new-hero-v1
   }
   // #enddocregion new-hero-v1
   // #enddocregion new-hero

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

@@ -561,24 +561,13 @@ figure.image-display
     replacing the entire hero and clearing the `name` property programmatically.
     Angular makes no assumptions and leaves the control in its current, dirty state.
 :marked
-  We'll have to reset the form controls manually with a small trick.
-  We add an `active` flag to the component, initialized to `true`. When we add a new hero,
-  we toggle `active` false and then immediately back to true with a quick `setTimeout`.
-+makeExample('forms/ts/app/hero-form.component.ts',
-  'new-hero',
-  'app/hero-form.component.ts (New Hero method - final)')(format=".")
-:marked
-  Then we bind the form element to this `active` flag.
+  We'll have to reset the form controls.
+  We call the `reset()` method of the form after calling the `newHero()` method.
 +makeExample('forms/ts/app/hero-form.component.html',
-  'form-active',
-  'app/hero-form.component.html (Form tag)')
+  'form-reset',
+  'app/hero-form.component.html (Reset the form)')
 :marked
-  With `NgIf` bound to the `active` flag,
-  clicking "New Hero" removes the form from the DOM and recreates it in a blink of an eye.
-  The re-created form is in a pristine state. The error message is hidden.
-.l-sub-section
-  :marked
-    This is a temporary workaround while we await a proper form reset feature.
+  This will reset the `heroForm` and its status by clicking "New Hero".
 :marked
 
 .l-main-section