Part way through Deborah's comments

kapunahelewong · kapunahelewong · commit 5d84fafe7f7b · 2016-12-05T16:29:40.000-05:00
diff --git a/public/docs/_examples/reactive-forms/ts/app/hero-signup-2.component.html b/public/docs/_examples/reactive-forms/ts/app/hero-signup-2.component.html
@@ -1,5 +1,5 @@
 <!-- #docregion basic-form-->
-<form novalidate [formGroup]="form">
+<form novalidate [formGroup]="heroForm">
   <div class="form-group">
     <label>Name:</label>
     <input class="form-control" formControlName="name">
diff --git a/public/docs/_examples/reactive-forms/ts/app/hero-signup-3.component.html b/public/docs/_examples/reactive-forms/ts/app/hero-signup-3.component.html
@@ -1,5 +1,5 @@
 <!-- #docregion -->
-<form novalidate [formGroup]="form">
+<form novalidate [formGroup]="heroForm">
   <div class="form-group">
     <label>Name:</label>
     <input class="form-control" formControlName="name">
@@ -35,4 +35,4 @@
     <label>Zip Code:</label>
     <input class="form-control" formControlName="zip">
   </div>
-</form>
+</form>
diff --git a/public/docs/_examples/reactive-forms/ts/app/hero-signup-4.component.html b/public/docs/_examples/reactive-forms/ts/app/hero-signup-4.component.html
@@ -1,5 +1,5 @@
 <h2>Hero Sign Up</h2>
-<form novalidate [formGroup]="form">
+<form novalidate [formGroup]="heroForm">
     <div class="form-group">
       <label>Name:</label>
       <input class="form-control" formControlName="name">
diff --git a/public/docs/_examples/reactive-forms/ts/app/hero-signup-5.component.html b/public/docs/_examples/reactive-forms/ts/app/hero-signup-5.component.html
@@ -1,5 +1,5 @@
 <h2>Hero Sign Up</h2>
-<form novalidate [formGroup]="form">
+<form novalidate [formGroup]="heroForm">
     <div class="form-group">
       <label>Name:</label>
       <input class="form-control" formControlName="name">
diff --git a/public/docs/_examples/reactive-forms/ts/app/hero-signup-versions.component.ts b/public/docs/_examples/reactive-forms/ts/app/hero-signup-versions.component.ts
@@ -13,7 +13,7 @@ import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
 
 // #docregion v1
 export class HeroSignUpComponent1 {
-  form = new FormGroup ({
+  heroForm = new FormGroup ({
     name: new FormControl(),
     username: new FormControl(),
     password: new FormControl(),
@@ -29,9 +29,9 @@ export class HeroSignUpComponent1 {
 })
 // #docregion v2
 export class HeroSignUpComponent2 {
-  form: FormGroup; // <--- form is of type FormGroup
+  heroForm: FormGroup; // <--- heroForm is of type FormGroup
   constructor(private _fb: FormBuilder) { // <--- inject FormBuilder
-    this.form = this._fb.group({ // <--- make this.form a FormBuilder group
+    this.heroForm = this._fb.group({ // <--- make this.form a FormBuilder group
       name: '',
       username: '',
       password: '',
@@ -48,9 +48,9 @@ export class HeroSignUpComponent2 {
 })
 // #docregion v3
 export class HeroSignUpComponent3 {
-  form: FormGroup;
+  heroForm: FormGroup;
   constructor(private _fb: FormBuilder) {
-    this.form = this._fb.group({
+    this.heroForm = this._fb.group({
       name: '',
       username: '',
       password: '',
@@ -71,9 +71,9 @@ export class HeroSignUpComponent3 {
 })
 // #docregion v4
 export class HeroSignUpComponent4 {
-  form: FormGroup;
+  heroForm: FormGroup;
   constructor(private _fb: FormBuilder) {
-    this.form = this._fb.group({
+    this.heroForm = this._fb.group({
       name: '',
       username: '',
       password: '',
@@ -96,9 +96,9 @@ export class HeroSignUpComponent4 {
 })
 // #docregion v5
 export class HeroSignUpComponent5 {
-  form: FormGroup;
+  heroForm: FormGroup;
   constructor(private _fb: FormBuilder) {
-    this.form = this._fb.group({
+    this.heroForm = this._fb.group({
       name: '',
       username: '',
       password: '',
@@ -110,7 +110,7 @@ export class HeroSignUpComponent5 {
             zip: ''
       })
     });
-    this.form.patchValue({
+    this.heroForm.patchValue({
       name: 'Nancy'
     });
   }
@@ -124,9 +124,9 @@ export class HeroSignUpComponent5 {
 })
 // #docregion v6
 export class HeroSignUpComponent6 {
-  form: FormGroup;
+  heroForm: FormGroup;
   constructor(private _fb: FormBuilder) {
-    this.form = this._fb.group({
+    this.heroForm = this._fb.group({
       name: '',
       username: '',
       password: '',
@@ -139,7 +139,7 @@ export class HeroSignUpComponent6 {
       })
     });
     // #docregion set-value
-    this.form.setValue({
+    this.heroForm.setValue({
       name: 'Nancy',
       username: 'NancyD',
       password: '',
@@ -164,12 +164,12 @@ export class HeroSignUpComponent6 {
 // #docregion v7
 export class HeroSignUpComponent7 {
   // #docregion addresses
-  form: FormGroup;
+  heroForm: FormGroup;
   addresses: FormArray; // <--add this under form
   // #enddocregion addresses
 
   constructor(private _fb: FormBuilder) {
-    this.form = this._fb.group({
+    this.heroForm = this._fb.group({
       name: '',
       username: '',
       password: '',
diff --git a/public/docs/_examples/reactive-forms/ts/app/hero-signup.component.html b/public/docs/_examples/reactive-forms/ts/app/hero-signup.component.html
@@ -1,5 +1,5 @@
 <h2>Hero Sign Up</h2>
-<form novalidate [formGroup]="form">
+<form novalidate [formGroup]="heroForm">
     <div class="form-group">
       <label>Name:</label>
       <input class="form-control" formControlName="name">
diff --git a/public/docs/_examples/reactive-forms/ts/app/hero-signup.component.ts b/public/docs/_examples/reactive-forms/ts/app/hero-signup.component.ts
@@ -10,11 +10,6 @@ import { FormGroup, FormBuilder, FormArray } from '@angular/forms';
   templateUrl: './hero-signup.component.html'
 })
 // #enddocregion reactive-comp-metadata
-@Component({
-  moduleId: module.id,
-  selector: 'hero-signup-7',
-  templateUrl: './hero-signup-5.component.html'
-})
 
 export class HeroSignUpComponent {
   form: FormGroup;
diff --git a/public/docs/ts/latest/guide/reactive-forms.jade b/public/docs/ts/latest/guide/reactive-forms.jade
@@ -59,7 +59,7 @@ a#create-comp
   - `FormGroup`: Allows you to group **FormControls**, 
   **FormArrays**, and other **FormGroups**.
 
-  Below the import statements, use the `@Component` decorator 
+  Above the class, use the `@Component` decorator 
   to provide metadata to Angular:
 
 +makeExample('reactive-forms/ts/app/hero-signup.component.ts', 'reactive-comp-metadata','app/hero-signup.component.ts (excerpt)')(format=".")
@@ -103,8 +103,8 @@ a#create-template
 :marked
   On the `<form>` tag, `novalidate` prevents the browser 
   from attempting any native validations 
-  and `[formGroup]="form"` lets Angular know that this is the 
-  form you’re referring to in the component class.
+  and `[formGroup]="heroForm"` lets Angular know that this is the 
+  form property you’re referring to in the component class.
 
 .l-sub-section
   :marked
@@ -172,17 +172,23 @@ a#formbuilder
   
   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 
+  you can use `FormBuilder` to set the `heroForm` as a group, which 
   lets you instantiate the **FormControls** by simply using the 
-  `formControlName` and in this case, an empty value. In this 
+  `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=".")
 
+.alert.is-important
+  :marked
+     You could provide a value for any of the **FormControls**, for 
+     example `name: 'Nancy'` populates the input with "Nancy".
+
 :marked
-  This form looks great, but are the model and template talking? 
+  This form looks great, but are the user's entries in the 
+  view reflected in the form model? 
   To inspect what’s going on, add this after the 
   closing `form` tag in `app.component.html`:
 
@@ -203,7 +209,6 @@ figure.image-display
   suddenly managing lots of individual 
   **FormControls**, you need a way to organize them.
 
-
 .l-main-section
 a#grouping
 :marked
@@ -306,21 +311,24 @@ table(width="100%")
     td
       :marked
          Returns the status of a `FormControl` as valid, 
-         invalid - **KARA, CAN YOU HELP ME HERE?**.
+         invalid, pending, or disabled.
   tr
     td <code>myControl.pristine</code>
     td
       :marked
-         **KARA, CAN YOU HELP ME HERE, TOO?**.
+         Returns a boolean dependant on whether or 
+         not the user has changed the value in the UI.
   tr
     td <code>myControl.untouched</code>
     td
       :marked
-         **KARA, CAN YOU HELP ME HERE, TOO?**.                                    
+         Returns a boolean. A control is untouched if 
+         the user has not yet triggered a blur event on it.
+                                  
 :marked
   These are just a few examples to give you an idea of what's 
-  available. To read more about 
-  **WHERE SHOULD I LINK TO? THE API REF DOESN'T GO INTO THESE METHODS**
+  available. To read more about these and other properties,
+  see [AbstractControl](../api/forms/index/AbstractControl-class.html).
 
   You can inspect an individual `FormControl` in the demo, such 
   as the one for Name, by using the `.get()` method. 
