refactor: move angular source to /packages rather than modules/@angular

packages/examples/forms/ts/formBuilder/e2e_test/form_builder_spec.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
+ */
+
+import {ElementArrayFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('formBuilder example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let inputs: ElementArrayFinder;
+  let paragraphs: ElementArrayFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/formBuilder/index.html');
+    inputs = element.all(by.css('input'));
+    paragraphs = element.all(by.css('p'));
+  });
+
+  it('should populate the UI with initial values', () => {
+    expect(inputs.get(0).getAttribute('value')).toEqual('Nancy');
+    expect(inputs.get(1).getAttribute('value')).toEqual('Drew');
+  });
+
+  it('should update the validation status', () => {
+    expect(paragraphs.get(1).getText()).toEqual('Validation status: VALID');
+
+    inputs.get(0).click();
+    inputs.get(0).clear();
+    inputs.get(0).sendKeys('a');
+    expect(paragraphs.get(1).getText()).toEqual('Validation status: INVALID');
+  });
+
+});

packages/examples/forms/ts/formBuilder/form_builder_example.ts

@@ -0,0 +1,42 @@
+/**
+ * @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, Inject} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form [formGroup]="form">
+      <div formGroupName="name">
+        <input formControlName="first" placeholder="First">
+        <input formControlName="last" placeholder="Last">
+      </div>
+      <input formControlName="email" placeholder="Email">
+      <button>Submit</button>
+    </form>
+    
+    <p>Value: {{ form.value | json }}</p>
+    <p>Validation status: {{ form.status }}</p>
+  `
+})
+export class FormBuilderComp {
+  form: FormGroup;
+
+  constructor(@Inject(FormBuilder) fb: FormBuilder) {
+    this.form = fb.group({
+      name: fb.group({
+        first: ['Nancy', Validators.minLength(2)],
+        last: 'Drew',
+      }),
+      email: '',
+    });
+  }
+}
+// #enddocregion

packages/examples/forms/ts/formBuilder/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 {FormBuilderComp} from './form_builder_example';
+
+@NgModule({
+  imports: [BrowserModule, ReactiveFormsModule],
+  declarations: [FormBuilderComp],
+  bootstrap: [FormBuilderComp]
+})
+export class AppModule {
+}

packages/examples/forms/ts/nestedFormArray/e2e_test/nested_form_array_spec.ts

@@ -0,0 +1,43 @@
+/**
+ * @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 {ElementArrayFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('nestedFormArray example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let inputs: ElementArrayFinder;
+  let buttons: ElementArrayFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/nestedFormArray/index.html');
+    inputs = element.all(by.css('input'));
+    buttons = element.all(by.css('button'));
+  });
+
+  it('should populate the UI with initial values', () => {
+    expect(inputs.get(0).getAttribute('value')).toEqual('SF');
+    expect(inputs.get(1).getAttribute('value')).toEqual('NY');
+  });
+
+  it('should add inputs programmatically', () => {
+    expect(inputs.count()).toBe(2);
+
+    buttons.get(1).click();
+    inputs = element.all(by.css('input'));
+
+    expect(inputs.count()).toBe(3);
+  });
+
+  it('should set the value programmatically', () => {
+    buttons.get(2).click();
+    expect(inputs.get(0).getAttribute('value')).toEqual('LA');
+    expect(inputs.get(1).getAttribute('value')).toEqual('MTV');
+  });
+
+});

packages/examples/forms/ts/nestedFormArray/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 {NestedFormArray} from './nested_form_array_example';
+
+@NgModule({
+  imports: [BrowserModule, ReactiveFormsModule],
+  declarations: [NestedFormArray],
+  bootstrap: [NestedFormArray]
+})
+export class AppModule {
+}

packages/examples/forms/ts/nestedFormArray/nested_form_array_example.ts

@@ -0,0 +1,49 @@
+/**
+ * @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
+ */
+
+/* tslint:disable:no-console  */
+// #docregion Component
+import {Component} from '@angular/core';
+import {FormArray, FormControl, FormGroup} from '@angular/forms';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+      <div formArrayName="cities">
+        <div *ngFor="let city of cities.controls; let i=index">
+          <input [formControlName]="i" placeholder="City">
+        </div>
+      </div>
+      <button>Submit</button>
+    </form>
+    
+    <button (click)="addCity()">Add City</button>
+    <button (click)="setPreset()">Set preset</button>
+  `,
+})
+export class NestedFormArray {
+  form = new FormGroup({
+    cities: new FormArray([
+      new FormControl('SF'),
+      new FormControl('NY'),
+    ]),
+  });
+
+  get cities(): FormArray { return this.form.get('cities') as FormArray; }
+
+  addCity() { this.cities.push(new FormControl()); }
+
+  onSubmit() {
+    console.log(this.cities.value);  // ['SF', 'NY']
+    console.log(this.form.value);    // { cities: ['SF', 'NY'] }
+  }
+
+  setPreset() { this.cities.patchValue(['LA', 'MTV']); }
+}
+// #enddocregion

packages/examples/forms/ts/nestedFormGroup/e2e_test/nested_form_group_spec.ts

@@ -0,0 +1,44 @@
+/**
+ * @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 {ElementFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('nestedFormGroup example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let firstInput: ElementFinder;
+  let lastInput: ElementFinder;
+  let button: ElementFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/nestedFormGroup/index.html');
+    firstInput = element(by.css('[formControlName="first"]'));
+    lastInput = element(by.css('[formControlName="last"]'));
+    button = element(by.css('button:not([type="submit"])'));
+  });
+
+  it('should populate the UI with initial values', () => {
+    expect(firstInput.getAttribute('value')).toEqual('Nancy');
+    expect(lastInput.getAttribute('value')).toEqual('Drew');
+  });
+
+  it('should show the error when name is invalid', () => {
+    firstInput.click();
+    firstInput.clear();
+    firstInput.sendKeys('a');
+
+    expect(element(by.css('p')).getText()).toEqual('Name is invalid.');
+  });
+
+  it('should set the value programmatically', () => {
+    button.click();
+    expect(firstInput.getAttribute('value')).toEqual('Bess');
+    expect(lastInput.getAttribute('value')).toEqual('Marvin');
+  });
+
+});

packages/examples/forms/ts/nestedFormGroup/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 {NestedFormGroupComp} from './nested_form_group_example';
+
+@NgModule({
+  imports: [BrowserModule, ReactiveFormsModule],
+  declarations: [NestedFormGroupComp],
+  bootstrap: [NestedFormGroupComp]
+})
+export class AppModule {
+}

packages/examples/forms/ts/nestedFormGroup/nested_form_group_example.ts

@@ -0,0 +1,53 @@
+/**
+ * @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
+ */
+
+/* tslint:disable:no-console  */
+// #docregion Component
+import {Component} from '@angular/core';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+      <p *ngIf="name.invalid">Name is invalid.</p>
+
+      <div formGroupName="name">
+        <input formControlName="first" placeholder="First name">
+        <input formControlName="last" placeholder="Last name">
+      </div>
+      <input formControlName="email" placeholder="Email">
+      <button type="submit">Submit</button>
+    </form>
+
+    <button (click)="setPreset()">Set preset</button>
+`,
+})
+export class NestedFormGroupComp {
+  form = new FormGroup({
+    name: new FormGroup({
+      first: new FormControl('Nancy', Validators.minLength(2)),
+      last: new FormControl('Drew', Validators.required)
+    }),
+    email: new FormControl()
+  });
+
+  get first(): any { return this.form.get('name.first'); }
+
+  get name(): any { return this.form.get('name'); }
+
+  onSubmit() {
+    console.log(this.first.value);  // 'Nancy'
+    console.log(this.name.value);   // {first: 'Nancy', last: 'Drew'}
+    console.log(this.form.value);   // {name: {first: 'Nancy', last: 'Drew'}, email: ''}
+    console.log(this.form.status);  // VALID
+  }
+
+  setPreset() { this.name.setValue({first: 'Bess', last: 'Marvin'}); }
+}
+// #enddocregion

packages/examples/forms/ts/ngModelGroup/e2e_test/ng_model_group_spec.ts

@@ -0,0 +1,42 @@
+/**
+ * @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 {ElementArrayFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('ngModelGroup example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let inputs: ElementArrayFinder;
+  let buttons: ElementArrayFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/ngModelGroup/index.html');
+    inputs = element.all(by.css('input'));
+    buttons = element.all(by.css('button'));
+  });
+
+  it('should populate the UI with initial values', () => {
+    expect(inputs.get(0).getAttribute('value')).toEqual('Nancy');
+    expect(inputs.get(1).getAttribute('value')).toEqual('Drew');
+  });
+
+  it('should show the error when name is invalid', () => {
+    inputs.get(0).click();
+    inputs.get(0).clear();
+    inputs.get(0).sendKeys('a');
+
+    expect(element(by.css('p')).getText()).toEqual('Name is invalid.');
+  });
+
+  it('should set the value when changing the domain model', () => {
+    buttons.get(1).click();
+    expect(inputs.get(0).getAttribute('value')).toEqual('Bess');
+    expect(inputs.get(1).getAttribute('value')).toEqual('Marvin');
+  });
+
+});

packages/examples/forms/ts/ngModelGroup/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 {NgModelGroupComp} from './ng_model_group_example';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule],
+  declarations: [NgModelGroupComp],
+  bootstrap: [NgModelGroupComp]
+})
+export class AppModule {
+}

packages/examples/forms/ts/ngModelGroup/ng_model_group_example.ts

@@ -0,0 +1,42 @@
+/**
+ * @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
+ */
+
+/* tslint:disable:no-console  */
+// #docregion Component
+import {Component} from '@angular/core';
+import {NgForm} from '@angular/forms';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form #f="ngForm" (ngSubmit)="onSubmit(f)">
+      <p *ngIf="nameCtrl.invalid">Name is invalid.</p>
+    
+      <div ngModelGroup="name" #nameCtrl="ngModelGroup">
+        <input name="first" [ngModel]="name.first" minlength="2">
+        <input name="last" [ngModel]="name.last" required>
+      </div>
+      
+      <input name="email" ngModel> 
+      <button>Submit</button>
+    </form>
+    
+    <button (click)="setValue()">Set value</button>
+  `,
+})
+export class NgModelGroupComp {
+  name = {first: 'Nancy', last: 'Drew'};
+
+  onSubmit(f: NgForm) {
+    console.log(f.value);  // {name: {first: 'Nancy', last: 'Drew'}, email: ''}
+    console.log(f.valid);  // true
+  }
+
+  setValue() { this.name = {first: 'Bess', last: 'Marvin'}; }
+}
+// #enddocregion

packages/examples/forms/ts/radioButtons/e2e_test/radio_button_spec.ts

@@ -0,0 +1,42 @@
+/**
+ * @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 {ElementArrayFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('radioButtons example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let inputs: ElementArrayFinder;
+  let paragraphs: ElementArrayFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/radioButtons/index.html');
+    inputs = element.all(by.css('input'));
+    paragraphs = element.all(by.css('p'));
+  });
+
+  it('should populate the UI with initial values', () => {
+    expect(inputs.get(0).getAttribute('checked')).toEqual(null);
+    expect(inputs.get(1).getAttribute('checked')).toEqual('true');
+    expect(inputs.get(2).getAttribute('checked')).toEqual(null);
+
+    expect(paragraphs.get(0).getText()).toEqual('Form value: { "food": "lamb" }');
+    expect(paragraphs.get(1).getText()).toEqual('myFood value: lamb');
+  });
+
+  it('update model and other buttons as the UI value changes', () => {
+    inputs.get(0).click();
+
+    expect(inputs.get(0).getAttribute('checked')).toEqual('true');
+    expect(inputs.get(1).getAttribute('checked')).toEqual(null);
+    expect(inputs.get(2).getAttribute('checked')).toEqual(null);
+
+    expect(paragraphs.get(0).getText()).toEqual('Form value: { "food": "beef" }');
+    expect(paragraphs.get(1).getText()).toEqual('myFood value: beef');
+  });
+});

packages/examples/forms/ts/radioButtons/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 {RadioButtonComp} from './radio_button_example';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule],
+  declarations: [RadioButtonComp],
+  bootstrap: [RadioButtonComp]
+})
+export class AppModule {
+}

packages/examples/forms/ts/radioButtons/radio_button_example.ts

@@ -0,0 +1,28 @@
+/**
+ * @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 TemplateDriven
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form #f="ngForm">
+      <input type="radio" value="beef" name="food" [(ngModel)]="myFood"> Beef
+      <input type="radio" value="lamb" name="food" [(ngModel)]="myFood"> Lamb
+      <input type="radio" value="fish" name="food" [(ngModel)]="myFood"> Fish
+    </form>
+    
+    <p>Form value: {{ f.value | json }}</p>  <!-- {food: 'lamb' } -->
+    <p>myFood value: {{ myFood }}</p>  <!-- 'lamb' -->
+  `,
+})
+export class RadioButtonComp {
+  myFood = 'lamb';
+}
+// #enddocregion

packages/examples/forms/ts/reactiveRadioButtons/e2e_test/reactive_radio_button_spec.ts

@@ -0,0 +1,38 @@
+/**
+ * @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 {ElementArrayFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('radioButtons example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let inputs: ElementArrayFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/reactiveRadioButtons/index.html');
+    inputs = element.all(by.css('input'));
+  });
+
+  it('should populate the UI with initial values', () => {
+    expect(inputs.get(0).getAttribute('checked')).toEqual(null);
+    expect(inputs.get(1).getAttribute('checked')).toEqual('true');
+    expect(inputs.get(2).getAttribute('checked')).toEqual(null);
+
+    expect(element(by.css('p')).getText()).toEqual('Form value: { "food": "lamb" }');
+  });
+
+  it('update model and other buttons as the UI value changes', () => {
+    inputs.get(0).click();
+
+    expect(inputs.get(0).getAttribute('checked')).toEqual('true');
+    expect(inputs.get(1).getAttribute('checked')).toEqual(null);
+    expect(inputs.get(2).getAttribute('checked')).toEqual(null);
+
+    expect(element(by.css('p')).getText()).toEqual('Form value: { "food": "beef" }');
+  });
+});

packages/examples/forms/ts/reactiveRadioButtons/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 {ReactiveRadioButtonComp} from './reactive_radio_button_example';
+
+@NgModule({
+  imports: [BrowserModule, ReactiveFormsModule],
+  declarations: [ReactiveRadioButtonComp],
+  bootstrap: [ReactiveRadioButtonComp]
+})
+export class AppModule {
+}

packages/examples/forms/ts/reactiveRadioButtons/reactive_radio_button_example.ts

@@ -0,0 +1,30 @@
+/**
+ * @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 Reactive
+import {Component} from '@angular/core';
+import {FormControl, FormGroup} from '@angular/forms';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form [formGroup]="form">
+      <input type="radio" formControlName="food" value="beef" > Beef
+      <input type="radio" formControlName="food" value="lamb"> Lamb
+      <input type="radio" formControlName="food" value="fish"> Fish
+    </form>
+    
+    <p>Form value: {{ form.value | json }}</p>  <!-- {food: 'lamb' } -->
+  `,
+})
+export class ReactiveRadioButtonComp {
+  form = new FormGroup({
+    food: new FormControl('lamb'),
+  });
+}
+// #enddocregion

packages/examples/forms/ts/reactiveSelectControl/e2e_test/reactive_select_control_spec.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
+ */
+
+import {ElementArrayFinder, ElementFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('reactiveSelectControl example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let select: ElementFinder;
+  let options: ElementArrayFinder;
+  let p: 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" } }');
+  });
+
+});

packages/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 {
+}

packages/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

packages/examples/forms/ts/selectControl/e2e_test/select_control_spec.ts

@@ -0,0 +1,35 @@
+/**
+ * @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 {ElementArrayFinder, ElementFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('selectControl example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let select: ElementFinder;
+  let options: ElementArrayFinder;
+  let p: 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" } }');
+  });
+
+});

packages/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 {
+}

packages/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

packages/examples/forms/ts/simpleForm/e2e_test/simple_form_spec.ts

@@ -0,0 +1,44 @@
+/**
+ * @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 {ElementArrayFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('simpleForm example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let inputs: ElementArrayFinder;
+  let paragraphs: ElementArrayFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/simpleForm/index.html');
+    inputs = element.all(by.css('input'));
+    paragraphs = element.all(by.css('p'));
+  });
+
+  it('should update the domain model as you type', () => {
+    inputs.get(0).click();
+    inputs.get(0).sendKeys('Nancy');
+
+    inputs.get(1).click();
+    inputs.get(1).sendKeys('Drew');
+
+    expect(paragraphs.get(0).getText()).toEqual('First name value: Nancy');
+    expect(paragraphs.get(2).getText()).toEqual('Form value: { "first": "Nancy", "last": "Drew" }');
+  });
+
+  it('should report the validity correctly', () => {
+    expect(paragraphs.get(1).getText()).toEqual('First name valid: false');
+    expect(paragraphs.get(3).getText()).toEqual('Form valid: false');
+    inputs.get(0).click();
+    inputs.get(0).sendKeys('a');
+
+    expect(paragraphs.get(1).getText()).toEqual('First name valid: true');
+    expect(paragraphs.get(3).getText()).toEqual('Form valid: true');
+  });
+
+});

packages/examples/forms/ts/simpleForm/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 {SimpleFormComp} from './simple_form_example';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule],
+  declarations: [SimpleFormComp],
+  bootstrap: [SimpleFormComp]
+})
+export class AppModule {
+}

packages/examples/forms/ts/simpleForm/simple_form_example.ts

@@ -0,0 +1,35 @@
+/**
+ * @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
+ */
+
+/* tslint:disable:no-console  */
+// #docregion Component
+import {Component} from '@angular/core';
+import {NgForm} from '@angular/forms';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
+      <input name="first" ngModel required #first="ngModel">
+      <input name="last" ngModel>
+      <button>Submit</button>
+    </form>
+    
+    <p>First name value: {{ first.value }}</p>
+    <p>First name valid: {{ first.valid }}</p>
+    <p>Form value: {{ f.value | json }}</p>
+    <p>Form valid: {{ f.valid }}</p>
+  `,
+})
+export class SimpleFormComp {
+  onSubmit(f: NgForm) {
+    console.log(f.value);  // { first: '', last: '' }
+    console.log(f.valid);  // false
+  }
+}
+// #enddocregion

packages/examples/forms/ts/simpleFormControl/e2e_test/simple_form_control_spec.ts

@@ -0,0 +1,54 @@
+/**
+ * @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 {ElementFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('simpleFormControl example', () => {
+  afterEach(verifyNoBrowserErrors);
+
+  describe('index view', () => {
+    let input: ElementFinder;
+    let valueP: ElementFinder;
+    let statusP: ElementFinder;
+
+    beforeEach(() => {
+      browser.get('/forms/ts/simpleFormControl/index.html');
+      input = element(by.css('input'));
+      valueP = element(by.css('p:first-of-type'));
+      statusP = element(by.css('p:last-of-type'));
+    });
+
+    it('should populate the form control value in the DOM', () => {
+      expect(input.getAttribute('value')).toEqual('value');
+      expect(valueP.getText()).toEqual('Value: value');
+    });
+
+    it('should update the value as user types', () => {
+      input.click();
+      input.sendKeys('s!');
+
+      expect(valueP.getText()).toEqual('Value: values!');
+    });
+
+    it('should show the correct validity state', () => {
+      expect(statusP.getText()).toEqual('Validation status: VALID');
+
+      input.click();
+      input.clear();
+      input.sendKeys('a');
+      expect(statusP.getText()).toEqual('Validation status: INVALID');
+    });
+
+    it('should set the value programmatically', () => {
+      element(by.css('button')).click();
+      expect(input.getAttribute('value')).toEqual('new value');
+    });
+
+  });
+});

packages/examples/forms/ts/simpleFormControl/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 {SimpleFormControl} from './simple_form_control_example';
+
+@NgModule({
+  imports: [BrowserModule, ReactiveFormsModule],
+  declarations: [SimpleFormControl],
+  bootstrap: [SimpleFormControl]
+})
+export class AppModule {
+}

packages/examples/forms/ts/simpleFormControl/simple_form_control_example.ts

@@ -0,0 +1,29 @@
+/**
+ * @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, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'example-app',
+  template: `
+     <input [formControl]="control">
+      
+     <p>Value: {{ control.value }}</p>
+     <p>Validation status: {{ control.status }}</p>
+     
+     <button (click)="setValue()">Set value</button>
+  `,
+})
+export class SimpleFormControl {
+  control: FormControl = new FormControl('value', Validators.minLength(2));
+
+  setValue() { this.control.setValue('new value'); }
+}
+// #enddocregion

packages/examples/forms/ts/simpleFormGroup/e2e_test/simple_form_group_spec.ts

@@ -0,0 +1,45 @@
+/**
+ * @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 {ElementFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('formControlName example', () => {
+  afterEach(verifyNoBrowserErrors);
+
+  describe('index view', () => {
+    let firstInput: ElementFinder;
+    let lastInput: ElementFinder;
+
+    beforeEach(() => {
+      browser.get('/forms/ts/simpleFormGroup/index.html');
+      firstInput = element(by.css('[formControlName="first"]'));
+      lastInput = element(by.css('[formControlName="last"]'));
+    });
+
+    it('should populate the form control values in the DOM', () => {
+      expect(firstInput.getAttribute('value')).toEqual('Nancy');
+      expect(lastInput.getAttribute('value')).toEqual('Drew');
+    });
+
+    it('should show the error when the form is invalid', () => {
+      firstInput.click();
+      firstInput.clear();
+      firstInput.sendKeys('a');
+
+      expect(element(by.css('div')).getText()).toEqual('Name is too short.');
+    });
+
+    it('should set the value programmatically', () => {
+      element(by.css('button:not([type="submit"])')).click();
+      expect(firstInput.getAttribute('value')).toEqual('Carson');
+      expect(lastInput.getAttribute('value')).toEqual('Drew');
+    });
+
+  });
+});

packages/examples/forms/ts/simpleFormGroup/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 {SimpleFormGroup} from './simple_form_group_example';
+
+@NgModule({
+  imports: [BrowserModule, ReactiveFormsModule],
+  declarations: [SimpleFormGroup],
+  bootstrap: [SimpleFormGroup]
+})
+export class AppModule {
+}

packages/examples/forms/ts/simpleFormGroup/simple_form_group_example.ts

@@ -0,0 +1,44 @@
+/**
+ * @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
+ */
+
+/* tslint:disable:no-console  */
+// #docregion Component
+import {Component} from '@angular/core';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'example-app',
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+      <div *ngIf="first.invalid"> Name is too short. </div>
+
+      <input formControlName="first" placeholder="First name">
+      <input formControlName="last" placeholder="Last name">
+
+      <button type="submit">Submit</button>
+   </form>
+   <button (click)="setValue()">Set preset value</button>
+  `,
+})
+export class SimpleFormGroup {
+  form = new FormGroup({
+    first: new FormControl('Nancy', Validators.minLength(2)),
+    last: new FormControl('Drew'),
+  });
+
+  get first(): any { return this.form.get('first'); }
+
+  onSubmit(): void {
+    console.log(this.form.value);  // {first: 'Nancy', last: 'Drew'}
+  }
+
+  setValue() { this.form.setValue({first: 'Carson', last: 'Drew'}); }
+}
+
+
+// #enddocregion

packages/examples/forms/ts/simpleNgModel/e2e_test/simple_ng_model_spec.ts

@@ -0,0 +1,45 @@
+/**
+ * @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 {ElementArrayFinder, ElementFinder, browser, by, element} from 'protractor';
+import {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('simpleNgModel example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let input: ElementFinder;
+  let paragraphs: ElementArrayFinder;
+  let button: ElementFinder;
+
+  beforeEach(() => {
+    browser.get('/forms/ts/simpleNgModel/index.html');
+    input = element(by.css('input'));
+    paragraphs = element.all(by.css('p'));
+    button = element(by.css('button'));
+  });
+
+  it('should update the domain model as you type', () => {
+    input.click();
+    input.sendKeys('Carson');
+
+    expect(paragraphs.get(0).getText()).toEqual('Value: Carson');
+  });
+
+  it('should report the validity correctly', () => {
+    expect(paragraphs.get(1).getText()).toEqual('Valid: false');
+    input.click();
+    input.sendKeys('a');
+
+    expect(paragraphs.get(1).getText()).toEqual('Valid: true');
+  });
+
+  it('should set the value by changing the domain model', () => {
+    button.click();
+    expect(input.getAttribute('value')).toEqual('Nancy');
+  });
+
+});

packages/examples/forms/ts/simpleNgModel/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 {SimpleNgModelComp} from './simple_ng_model_example';
+
+@NgModule({
+  imports: [BrowserModule, FormsModule],
+  declarations: [SimpleNgModelComp],
+  bootstrap: [SimpleNgModelComp]
+})
+export class AppModule {
+}

packages/examples/forms/ts/simpleNgModel/simple_ng_model_example.ts

@@ -0,0 +1,28 @@
+/**
+ * @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: `
+    <input [(ngModel)]="name" #ctrl="ngModel" required>
+
+    <p>Value: {{ name }}</p>
+    <p>Valid: {{ ctrl.valid }}</p>
+    
+    <button (click)="setValue()">Set value</button>
+  `,
+})
+export class SimpleNgModelComp {
+  name: string = '';
+
+  setValue() { this.name = 'Nancy'; }
+}
+// #enddocregion