docs(forms): add example app for formControlDirective (#11508)

modules/@angular/examples/forms/ts/simpleFormControl/e2e_test/simple_form_control_spec.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
+ */
+
+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');
+    });
+
+  });
+});

modules/@angular/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 {
+}

modules/@angular/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