docs(forms): update example for formGroupDirective

modules/@angular/examples/forms/ts/simpleFormGroup/e2e_test/simple_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 {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');
+    });
+
+  });
+});

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

modules/@angular/examples/forms/ts/simpleFormGroup/simple_form_group_example.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
+ */
+
+// #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() { 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