docs(forms): add example app for formControlName

modules/@angular/examples/forms/ts/formControlName/e2e_test/form_control_name_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 {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('formControlName example', () => {
+  afterEach(verifyNoBrowserErrors);
+
+  describe('index view', () => {
+    let firstInput: ElementFinder;
+    let lastInput: ElementFinder;
+
+    beforeEach(() => {
+      browser.get('/forms/ts/formControlName/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.');
+    });
+
+  });
+});

modules/@angular/examples/forms/ts/formControlName/form_control_name_example.ts

@@ -0,0 +1,39 @@
+/**
+ * @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, 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>
+  
+  `
+})
+export class FormControlNameComp {
+  form = new FormGroup(
+      {first: new FormControl('Nancy', Validators.minLength(2)), last: new FormControl('Drew')});
+
+  get first() { return this.form.get('first'); }
+
+  onSubmit(): void {
+    console.log(this.form.value);  // {first: 'Nancy', last: 'Drew'}
+  }
+}
+
+
+// #enddocregion

modules/@angular/examples/forms/ts/formControlName/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 {FormControlNameComp} from './form_control_name_example';
+
+@NgModule({
+  imports: [BrowserModule, ReactiveFormsModule],
+  declarations: [FormControlNameComp],
+  bootstrap: [FormControlNameComp]
+})
+export class AppModule {
+}