docs(reactive-forms): add checkbox and radio buttons

Author: kapunahelewong

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

@@ -24,4 +24,17 @@ <h3><i>A FormGroup with multiple FormControls</i></h3>
     <label>Zip Code:</label>
     <input class="form-control" formControlName="zip">
   </div>
+  <div class="form-group">
+    <label>Super power:</label>
+      <input type="radio" formControlName="power" value="flight">Flight
+      <input type="radio" formControlName="power" value="x-ray vision">X-ray vision
+      <input type="radio" formControlName="power" value="strength">Strength
+  </div>
+  <div class="checkbox">
+    <label>
+      <input type="checkbox" formControlName="sidekick">I have a sidekick.</label>
+  </div>
 </form>
+
+
+<p>Form value: {{ heroForm.value | json }}</p>

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

@@ -26,7 +26,9 @@ export class HeroDetailComponent4 {
       street: '',
       city: '',
       state: '',
-      zip: ''
+      zip: '',
+      power: '',
+      sidekick: ''
     });
   }
 }

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

@@ -89,7 +89,7 @@ a#intro
   You don't push and pull data values. Angular handles that for you with `ngModel`.
   Angular updates the mutable _data model_ with user changes as they happen.
 
-  When writing in a reactive style, you rarely, if ever, use two-way data binding. 
+  For this reason, the `ngModel` directive is not part of the ReactiveFormsModule.
 
   These differences reflect two architectural paradigms, 
   with their own strengths and weaknesses,
@@ -398,7 +398,8 @@ figure.image-display
 
 :marked
   ### More FormControls
-  A hero has more than a name. A hero has an address too. You already have address data 
+  A hero has more than a name. A hero has an address, a super 
+  power and sometimes a sidekick too. You already have address data 
   in `data-model.ts`, so add it to the imports so you can use it:
 
 +makeExample('reactive-forms/ts/app/hero-detail-4.component.ts', 'imports','app/hero-detail.component.ts (excerpt)')(format=".")
@@ -418,12 +419,24 @@ figure.image-display
 
 .alert.is-helpful
   :marked
-    *Reminder*: Ignore the many mentions of `form-group` and `form-control`in this markup.
+    *Reminder*: Ignore the many mentions of `form-group`, 
+    `form-control`, and `checkbox` in this markup.
     Those are _bootstrap_ CSS classes that Angular itself ignores.
     Pay attention to the `formGroupName` and `formControlName` attributes.
     They are the Angular directives that bind the HTML controls to the 
     Angular `FormGroup` and `FormControl` properties in the component class.
 
+:marked
+  These new `FormControls` include text inputs, a select for the state, 
+  radio buttons, and a checkbox. In the class 
+  they are instantiated in the same way and in the template, 
+  each one is tied to the form control tree by specifiying 
+  the `FormControl` name using the `formControlName` directive. 
+  For more information about radio buttons, selects, and checkboxes, 
+  see the API reference for [RadioControlValueAccessor](api/forms/index/RadioControlValueAccessor-directive.html), 
+  [SelectControlValueAccessor](api/forms/index/SelectControlValueAccessor-directive.html), 
+  and [CheckboxControlValueAccessor](api/forms/index/CheckboxControlValueAccessor-directive.html).
+
 .l-main-section
 a#grouping
 :marked