docs(forms): add example apps for ngModel (#11524)

modules/@angular/examples/forms/ts/simpleNgModel/e2e_test/simple_ng_model_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 {verifyNoBrowserErrors} from '../../../../_common/e2e_util';
+
+describe('simpleNgModel example', () => {
+  afterEach(verifyNoBrowserErrors);
+  let input: ElementFinder;
+  let paragraphs: ElementFinder;
+  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');
+  });
+
+});

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

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