makeExample updates

Author: kapunahelewong

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

@@ -29,6 +29,25 @@ export class HeroSignUpComponent1 {
 })
 // #docregion v2
 export class HeroSignUpComponent2 {
+  form: FormGroup; // <--- form is of type FormGroup
+  constructor(private _fb: FormBuilder) { // <--- inject FormBuilder
+    this.form = this._fb.group({ // <--- make this.form a FormBuilder group
+      name: '',
+      username: '',
+      password: '',
+      confirm: ''
+    });
+  }
+}
+// #enddocregion v2
+
+@Component({
+  moduleId: module.id,
+  selector: 'hero-signup-3',
+  templateUrl: './hero-signup-3.component.html'
+})
+// #docregion v3
+export class HeroSignUpComponent3 {
   form: FormGroup;
   constructor(private _fb: FormBuilder) {
     this.form = this._fb.group({
@@ -43,15 +62,15 @@ export class HeroSignUpComponent2 {
     });
   }
 }
-// #enddocregion v2
+// #enddocregion v3
 
 @Component({
   moduleId: module.id,
-  selector: 'hero-signup-3',
-  templateUrl: './hero-signup-3.component.html'
+  selector: 'hero-signup-4',
+  templateUrl: './hero-signup-4.component.html'
 })
-// #docregion v3
-export class HeroSignUpComponent3 {
+// #docregion v4
+export class HeroSignUpComponent4 {
   form: FormGroup;
   constructor(private _fb: FormBuilder) {
     this.form = this._fb.group({
@@ -62,16 +81,16 @@ export class HeroSignUpComponent3 {
     });
   }
 }
-// #enddocregion v3
+// #enddocregion v4
 
 
 @Component({
   moduleId: module.id,
-  selector: 'hero-signup-4',
-  templateUrl: './hero-signup-4.component.html'
+  selector: 'hero-signup-5',
+  templateUrl: './hero-signup-5.component.html'
 })
-// #enddocregion v4
-export class HeroSignUpComponent4 {
+// #enddocregion v5
+export class HeroSignUpComponent5 {
   form: FormGroup;
   constructor(private _fb: FormBuilder) {
     this.form = this._fb.group({
@@ -88,15 +107,15 @@ export class HeroSignUpComponent4 {
     });
   }
 }
-// #enddocregion v4
+// #enddocregion v5
 
 @Component({
   moduleId: module.id,
-  selector: 'hero-signup-5',
-  templateUrl: './hero-signup-5.component.html'
+  selector: 'hero-signup-6',
+  templateUrl: './hero-signup-6.component.html'
 })
-// #docregion v5
-export class HeroSignUpComponent5 {
+// #docregion v6
+export class HeroSignUpComponent6 {
   form: FormGroup;
   constructor(private _fb: FormBuilder) {
     this.form = this._fb.group({
@@ -117,15 +136,15 @@ export class HeroSignUpComponent5 {
     });
   }
 }
-// #enddocregion v5
+// #enddocregion v6
 
 @Component({
   moduleId: module.id,
-  selector: 'hero-signup-6',
-  templateUrl: './hero-signup-6.component.html'
+  selector: 'hero-signup-7',
+  templateUrl: './hero-signup-7.component.html'
 })
-// #docregion v6
-export class HeroSignUpComponent6 {
+// #docregion v7
+export class HeroSignUpComponent7 {
   form: FormGroup;
   constructor(private _fb: FormBuilder) {
     this.form = this._fb.group({
@@ -155,7 +174,7 @@ export class HeroSignUpComponent6 {
     });
   }
 }
-// #enddocregion v6
+// #enddocregion v7
 
 export const components = [
   HeroSignUpComponent1,

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

@@ -126,25 +126,28 @@ a#formbuilder
   `FormBuilder` is a class that helps reduce repetition and clutter by doing some of the heavy lifting behind the scenes. 
   You've already imported `FormBuilder` into `hero-signup.component.ts`.
 
-  To take advantage of `FormBuilder`, `HeroSignUpComponent` needs refactoring. In the component class, let Angular know that `form` is of type `FormGroup`. Then use the constructor method and inject `FormBuilder` with `constructor(public fb: FormBuilder)`. Inside the constructor, you can use `FormBuilder` to set the `form` as a `FormBuilder` group which lets you instantiate the **FormControls** by simply using the `formControlName` and in this case, an empty value. In this way, `FormBuilder` instantiates each `FormControl` for you, reducing repetitive code. Now, you don't have to use `new` over and over.
+  To take advantage of `FormBuilder`, `HeroSignUpComponent` needs refactoring. In the component class, let Angular 
+  know that `form` is of type `FormGroup`. 
+  
+  Then use the constructor method and inject `FormBuilder` with 
+  `constructor(public fb: FormBuilder)`. Inside the constructor, you can use `FormBuilder` to set the 
+  `form` as a group, which lets you instantiate the **FormControls** by simply using the `formControlName` 
+  and in this case, an empty value. In this way, `FormBuilder` instantiates each `FormControl` for you, 
+  reducing repetitive code. Now, you don't have to use `new` over and over.
 
 +makeExample('reactive-forms/ts/app/hero-signup-versions.component.ts', 'v2','app/hero-signup.component.ts (excerpt)')(format=".")
 
 :marked
-  lkdjf
-
-+makeExample('reactive-forms/ts/app/hero-signup.component.1.ts', 'class-refactor','app/hero-signup.component.ts (excerpt)')(format=".")
-
-:marked
-  This form looks great, but are the model and template talking? To inspect what’s going on, add this after the closing form tag in app.component.html:
+  This form looks great, but are the model and template talking? To inspect what’s going on, add this after the 
+  closing form tag in `app.component.html`:
 
 +makeExample('reactive-forms/ts/app/hero-signup.component.html', 'form-value-json','app/hero-signup.component.html')(format=".")
 
 :marked
-  This outputs the value of the form in JSON in the browser.
+  This outputs the value of the form in JSON in the browser:
 
 figure.image-display
-  img(src="/resources/images/devguide/app/json-output1.png" width="400px" alt="JSON output")
+  img(src="/resources/images/devguide/reactive-forms/json-output1.png" width="400px" alt="JSON output")
 
 :marked
   Type a value into any of the inputs to see the value update dynamically.
@@ -156,7 +159,7 @@ figure.image-display
 a#grouping
 :marked
   ## Grouping FormControls
-  In the component class add some address FormControls as below.
+  In the component class add some address **FormControls** as below.
 
 +makeExample('reactive-forms/ts/app/hero-signup.component.1.ts', 'add-form-controls','app/hero-signup.component.ts (excerpt)')(format=".")