docs: refactor revert() and remove call to lifecylce hook

angular · Feb 21, 2018 · 2b04361 · 2b04361
1 parent 1c1cbba
commit 2b04361
Show file tree

Hide file tree

Showing 10 changed files with 374 additions and 410 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
@@ -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-3.component.html b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-3.component.html
@@ -13,4 +13,4 @@ <h3><i>A FormGroup with a single FormControl using FormBuilder</i></h3>
 <!-- #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-6.component.ts b/aio/content/examples/reactive-forms/src/app/hero-detail/hero-detail-6.component.ts
@@ -44,15 +44,23 @@ 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({
       name: this.hero.name
     });
     // #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.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,
+      // #docregion set-value-address
       address: this.hero.addresses[0] || new Address()
+      // #enddocregion set-value-address
     });
   }
-  // #enddocregion ngOnChanges
+  // #enddocregion rebuildForm
 
-  /* First version of ngOnChanges
-  // #docregion ngOnChanges-1
-  ngOnChanges()
-  // #enddocregion ngOnChanges-1
-  */
-  ngOnChanges1() {
+  /* First version of rebuildForm */
+  rebuildForm1() {
     // #docregion reset
     this.heroForm.reset();
-    // #enddocregion reset
-    // #docregion ngOnChanges-1
-    // #docregion set-value
-    this.heroForm.setValue({
+     // #enddocregion reset
+     // #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 set-value
   }
-  // #enddocregion ngOnChanges-1
 }
-
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
@@ -39,12 +39,17 @@ export class HeroDetailComponent8 implements OnChanges {
 
   // #docregion onchanges
   ngOnChanges() {
+    this.rebuildForm();
+  }
+  // #enddocregion onchanges
+
+  rebuildForm() {
     this.heroForm.reset({
       name: this.hero.name
     });
     this.setAddresses(this.hero.addresses);
   }
-  // #enddocregion onchanges
+
 
   // #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
@@ -5,7 +5,7 @@
   <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
@@ -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
     });
@@ -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/examples/reactive-forms/src/app/hero-list/hero-list.component.1.html b/aio/content/examples/reactive-forms/src/app/hero-list/hero-list.component.1.html
@@ -1,6 +1,6 @@
 <!-- #docregion -->
-<nav>
-  <a *ngFor="let hero of heroes | async" (click)="select(hero)">{{hero.name}}</a>
+<nav class="btn-toolbar">
+  <button class="btn btn-info" *ngFor="let hero of heroes | async" (click)="select(hero)">{{hero.name}}</button>
 </nav>
 
 <div *ngIf="selectedHero">

diff --git a/aio/content/examples/reactive-forms/src/app/hero-list/hero-list.component.html b/aio/content/examples/reactive-forms/src/app/hero-list/hero-list.component.html
@@ -2,9 +2,9 @@
 <h3 *ngIf="isLoading"><i>Loading heroes ... </i></h3>
 <h3 *ngIf="!isLoading">Select a hero:</h3>
 
-<nav>
+<nav class="btn-toolbar">
   <button (click)="getHeroes()" class="btn btn-primary">Refresh</button>
-  <a *ngFor="let hero of heroes | async" (click)="select(hero)">{{hero.name}}</a>
+  <button class="btn btn-info" *ngFor="let hero of heroes | async" (click)="select(hero)">{{hero.name}}</button>
 </nav>
 
 <div *ngIf="selectedHero">