watchName -> logChangeName

Author: kapunahelewong

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

@@ -1,6 +1,6 @@
 <!-- #docregion basic-form-->
 <h2>Hero Detail</h2>
-<h3><i>A simple form with a single FormControl</i></h3>
+<h3><i>FormGroup with a single FormControl</i></h3>
 <form [formGroup]="heroForm" novalidate>
   <div class="form-group">
     <label>Name:</label>

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

@@ -1,6 +1,6 @@
 <!-- #docregion basic-form-->
 <h2>Hero Detail</h2>
-<h3><i>A simple form with a single FormControl using FormBuilder</i></h3>
+<h3><i>A FormGroup with a single FormControl using FormBuilder</i></h3>
 <form [formGroup]="heroForm" novalidate>
   <div class="form-group">
     <label>Name:</label>

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

@@ -1,6 +1,6 @@
 <!-- #docregion -->
 <h2>Hero Detail</h2>
-<h3><i>A simple form with multiple FormControls in a single FormBuilder group</i></h3>
+<h3><i>A FormGroup with multiple FormControls</i></h3>
 <form [formGroup]="heroForm" novalidate>
   <div class="form-group">
     <label>Name:</label>

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

@@ -4,9 +4,9 @@
 <form [formGroup]="heroForm" (ngSubmit)="onSubmit()" novalidate>
   <div style="margin-bottom: 1em">
     <button type="submit"
-            [disabled]="!heroForm.dirty" class="btn btn-success">Save</button> &nbsp;
+            [disabled]="heroForm.pristine" class="btn btn-success">Save</button> &nbsp;
     <button type="reset" (click)="revert()"
-            [disabled]="!heroForm.dirty" class="btn btn-danger">Revert</button>
+            [disabled]="heroForm.pristine" class="btn btn-danger">Revert</button>
   </div>
 
   <!-- Hero Detail Controls -->

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

@@ -21,15 +21,15 @@ export class HeroDetailComponent implements OnChanges {
   // #enddocregion save-emitter
 
   heroForm: FormGroup;
-  // #docregion watch-name
+  // #docregion log-name-change
   nameChangeLog: string[] = [];
-  // #enddocregion watch-name
+  // #enddocregion log-name-change
   states = states;
 
   // #docregion ctor
   constructor(private fb: FormBuilder) {
     this.createForm();
-    this.watchName();
+    this.logNameChange();
   }
   // #enddocregion ctor
 
@@ -95,12 +95,12 @@ export class HeroDetailComponent implements OnChanges {
   revert() { this.ngOnChanges(); }
   // #enddocregion revert
 
-  // #docregion watch-name
-  watchName() {
+  // #docregion log-name-change
+  logNameChange() {
     const nameControl = this.heroForm.get('name') as FormControl;
     nameControl.valueChanges.forEach(
       (value: string) => this.nameChangeLog.push(value)
     );
   }
-  // #enddocregion watch-name
+  // #enddocregion log-name-change
 }

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

@@ -749,14 +749,14 @@ a#observe-control
   You don't need to know much about RxJS `Observable` to watch for a form control value change.
 
   Add the following method to watch for changes to the value of the _name_ `FormControl`.
-+makeExample('reactive-forms/ts/app/hero-detail.component.ts', 'watch-name','app/hero-detail.component.ts (watchName)')(format=".")
++makeExample('reactive-forms/ts/app/hero-detail.component.ts', 'log-name-change','app/hero-detail.component.ts (logNameChange)')(format=".")
 
 :marked
   Call it in the constructor, after creating the form.
 +makeExample('reactive-forms/ts/app/hero-detail.component.ts', 'ctor')(format=".")
 
 :marked
-  The `watchName` 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:
 +makeExample('reactive-forms/ts/app/hero-detail.component.html', 'name-change-log','app/hero-detail.component.html (Name change log)')(format=".")