docs(forms): add select control examples (#11728)

modules/@angular/examples/forms/ts/reactiveSelectControl/e2e_test/reactive_select_control_spec.ts

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('reactiveSelectControl example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let select: protractor.ElementFinder;
+  let options: protractor.ElementArrayFinder;
+  let p: protractor.ElementFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/reactiveSelectControl/index.html');
+    select = element(by.css('select'));
+    options = element.all(by.css('option'));
+    p = element(by.css('p'));
+  });
+
+  it('should populate the initial selection', () => {
+    expect(select.getAttribute('value')).toEqual('3: Object');
+    expect(options.get(3).getAttribute('selected')).toBe('true');
+  });
+
+  it('should update the model when the value changes in the UI', () => {
+    select.click();
+    options.get(0).click();
+
+    expect(p.getText()).toEqual('Form value: { "state": { "name": "Arizona", "abbrev": "AZ" } }');
+  });
+
+});

modules/@angular/examples/forms/ts/reactiveSelectControl/module.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {ReactiveSelectComp} from './reactive_select_control_example';
+
+@NgModule({
+  imports: [BrowserModule, ReactiveFormsModule],
+  declarations: [ReactiveSelectComp],
+  bootstrap: [ReactiveSelectComp]
+})
+export class AppModule {
+}

modules/@angular/examples/forms/ts/reactiveSelectControl/reactive_select_control_example.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+// #docregion Component
+import {Component} from '@angular/core';
+import {FormControl, FormGroup} from '@angular/forms';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form [formGroup]="form">
+      <select formControlName="state">
+        <option *ngFor="let state of states" [ngValue]="state">
+          {{ state.abbrev }}
+        </option>
+      </select>
+    </form>
+    
+     <p>Form value: {{ form.value | json }}</p> 
+     <!-- {state: {name: 'New York', abbrev: 'NY'} } -->
+  `,
+})
+export class ReactiveSelectComp {
+  states = [
+    {name: 'Arizona', abbrev: 'AZ'},
+    {name: 'California', abbrev: 'CA'},
+    {name: 'Colorado', abbrev: 'CO'},
+    {name: 'New York', abbrev: 'NY'},
+    {name: 'Pennsylvania', abbrev: 'PA'},
+  ];
+
+  form = new FormGroup({
+    state: new FormControl(this.states[3]),
+  });
+}
+// #enddocregion

modules/@angular/examples/forms/ts/selectControl/e2e_test/select_control_spec.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('selectControl example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let select: protractor.ElementFinder;
+  let options: protractor.ElementArrayFinder;
+  let p: protractor.ElementFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/selectControl/index.html');
+    select = element(by.css('select'));
+    options = element.all(by.css('option'));
+    p = element(by.css('p'));
+  });
+
+  it('should initially select the placeholder option',
+     () => { expect(options.get(0).getAttribute('selected')).toBe('true'); });
+
+  it('should update the model when the value changes in the UI', () => {
+    select.click();
+    options.get(1).click();
+
+    expect(p.getText()).toEqual('Form value: { "state": { "name": "Arizona", "abbrev": "AZ" } }');
+  });
+
+});

modules/@angular/examples/forms/ts/selectControl/module.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {BrowserModule} from '@angular/platform-browser';
+import {SelectControlComp} from './select_control_example';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule],
+  declarations: [SelectControlComp],
+  bootstrap: [SelectControlComp]
+})
+export class AppModule {
+}

modules/@angular/examples/forms/ts/selectControl/select_control_example.ts

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+// #docregion Component
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form #f="ngForm">
+      <select name="state" ngModel>
+        <option value="" disabled>Choose a state</option>
+        <option *ngFor="let state of states" [ngValue]="state">
+          {{ state.abbrev }}
+        </option>
+      </select>
+    </form>
+    
+     <p>Form value: {{ f.value | json }}</p>
+     <!-- example value: {state: {name: 'New York', abbrev: 'NY'} } -->
+  `,
+})
+export class SelectControlComp {
+  states = [
+    {name: 'Arizona', abbrev: 'AZ'},
+    {name: 'California', abbrev: 'CA'},
+    {name: 'Colorado', abbrev: 'CO'},
+    {name: 'New York', abbrev: 'NY'},
+    {name: 'Pennsylvania', abbrev: 'PA'},
+  ];
+}
+// #enddocregion