docs(reactive-forms): bind option value

Author: kapunahelewong

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

@@ -20,7 +20,7 @@ <h3><i>A FormGroup with multiple FormControls</i></h3>
   <div class="form-group">
     <label class="center-block">State:
       <select class="form-control" formControlName="state">
-          <option *ngFor="let state of states">{{state}}</option>
+          <option *ngFor="let state of states" [value]="state">{{state}}</option>
       </select>
     </label>
   </div>

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

@@ -21,7 +21,7 @@ <h4>Secret Lair</h4>
       <div class="form-group">
         <label class="center-block">State:
           <select class="form-control" formControlName="state">
-            <option *ngFor="let state of states">{{state}}</option>
+            <option *ngFor="let state of states" [value]="state">{{state}}</option>
           </select>
         </label>
       </div>

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

@@ -20,7 +20,7 @@ <h3><i>PatchValue to initialize a value</i></h3>
   <div class="form-group">
     <label class="center-block">State:
       <select class="form-control" formControlName="state">
-          <option *ngFor="let state of states">{{state}}</option>
+        <option *ngFor="let state of states" [value]="state">{{state}}</option>
       </select>
     </label>
   </div>

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

@@ -20,7 +20,7 @@ <h3><i>A FormGroup with multiple FormControls</i></h3>
   <div class="form-group">
     <label class="center-block">State:
       <select class="form-control" formControlName="state">
-          <option *ngFor="let state of states">{{state}}</option>
+        <option *ngFor="let state of states" [value]="state">{{state}}</option>
       </select>
     </label>
   </div>

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

@@ -30,7 +30,7 @@ <h4>Address #{{i + 1}}</h4>
           <div class="form-group">
             <label class="center-block">State:
               <select class="form-control" formControlName="state">
-                <option *ngFor="let state of states">{{state}}</option>
+                <option *ngFor="let state of states" [value]="state">{{state}}</option>
               </select>
             </label>
           </div>

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

@@ -12,8 +12,9 @@
   <!-- Hero Detail Controls -->
   <!-- #enddocregion buttons -->
   <div class="form-group">
-      <label>Name:</label>
-      <input class="form-control" formControlName="name">
+      <label>Name:
+        <input class="form-control" formControlName="name">
+      </label>
   </div>
 
   <div formArrayName="secretLairs" class="well well-lg">
@@ -22,22 +23,26 @@
       <h4>Address #{{i + 1}}</h4>
       <div style="margin-left: 1em;">
         <div class="form-group">
-          <label>Street:</label>
-          <input class="form-control" formControlName="street">
+          <label>Street:
+            <input class="form-control" formControlName="street">
+          </label>
         </div>
         <div class="form-group">
           <label>City:</label>
-          <input class="form-control" formControlName="city">
+            <input class="form-control" formControlName="city">
+          </label>
         </div>
         <div class="form-group">
-          <label>State:</label>
-          <select class="form-control" formControlName="state">
-            <option *ngFor="let state of states">{{state}}</option>
-          </select>
+          <label>State:
+            <select class="form-control" formControlName="state">
+              <option *ngFor="let state of states" [value]="state">{{state}}</option>
+            </select>
+          </label>
         </div>
         <div class="form-group">
-          <label>Zip Code:</label>
-          <input class="form-control" formControlName="zip">
+          <label>Zip Code:
+            <input class="form-control" formControlName="zip">
+          </label>
         </div>
       </div>
       <br>

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

@@ -465,6 +465,9 @@ figure.image-display
   The revised template includes more text inputs, a select box for the `state`, radio buttons for the `power`, 
   and a checkbox for the `sidekick`. 
 
+  You must bind the option's value property with `[value]="state"`. 
+  If you do not bind the value, the select shows the first option form the data model.
+
   The component _class_ defines control properties without regard for their representation in the template.
   You define the `state`, `power`, and `sidekick` controls the same way you defined the `name` control.
   You tie these controls to the template HTML elements in the same way,