docs(forms): update example for formGroupName (#11510)

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

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

modules/@angular/examples/forms/ts/nestedFormGroup/nested_form_group_example.ts

@@ -0,0 +1,52 @@
+/**
+ * @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()">
+      <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() { return this.form.get('name.first'); }
+
+  get name() { 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