docs: incorporated forms overview review feedback (#25663)

PR Close #25663

aio/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.spec.ts

@@ -0,0 +1,56 @@
+import { async, ComponentFixture, TestBed, tick, fakeAsync } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+
+import { FavoriteColorComponent } from './favorite-color.component';
+import { createNewEvent } from '../../shared/utils';
+
+describe('FavoriteColorComponent', () => {
+  let component: FavoriteColorComponent;
+  let fixture: ComponentFixture<FavoriteColorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [ FormsModule ],
+      declarations: [ FavoriteColorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FavoriteColorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  // #docregion model-to-view
+  it('should update the favorite color on the input field', fakeAsync(() => {
+    component.favoriteColor = 'Blue';
+
+    fixture.detectChanges();
+
+    tick();
+
+    const input = fixture.nativeElement.querySelector('input');
+
+    expect(input.value).toBe('Blue');
+  }));
+  // #enddocregion model-to-view
+
+  // #docregion view-to-model
+  it('should update the favorite color in the component', fakeAsync(() => {
+    const input = fixture.nativeElement.querySelector('input');
+    const event = createNewEvent('input');
+
+    input.value = 'Red';
+    input.dispatchEvent(event);
+
+    tick();
+
+    expect(component.favoriteColor).toEqual('Red');
+  }));
+  // #enddocregion view-to-model
+});

aio/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.ts

@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-template-favorite-color',
+  template: `
+    Favorite Color: <input type="text" [(ngModel)]="favoriteColor">
+  `,
+  styles: []
+})
+export class FavoriteColorComponent implements OnInit {
+  favoriteColor = '';
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

aio/content/examples/forms-overview/src/app/template/name/name.component.spec.ts

@@ -1,76 +0,0 @@
-// #docregion
-import { async, ComponentFixture, TestBed, tick, fakeAsync } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-
-import { createNewEvent } from '../../shared/utils';
-import { TemplateNameComponent } from './name.component';
-
-// #docregion tests
-describe('Template Name Component', () => {
-// #enddocregion tests
-  let component: TemplateNameComponent;
-  let fixture: ComponentFixture<TemplateNameComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [FormsModule],
-      declarations: [TemplateNameComponent]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TemplateNameComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-// #docregion tests
-  it('should update the value in the control', fakeAsync(() => {
-    // update the component instance variable
-    component.name = 'Nancy';
-
-    // run change detection
-    fixture.detectChanges();
-
-    // advance after change detection cycle
-    tick();
-
-    // query the element
-    const input = fixture.nativeElement.querySelector('input');
-
-    expect(input.value).toBe('Nancy');
-  }));
-
-  it('should update the value of the input field', fakeAsync(() => {
-    // update component instance variable
-    component.name = 'Nancy';
-
-    // run change detection
-    fixture.detectChanges();
-
-    // advance after change detection cycle
-    tick();
-
-    // query the element
-    const input = fixture.nativeElement.querySelector('input');
-    expect(input.value).toEqual('Nancy');
-
-    // update the form field value
-    input.value = 'Smith';
-
-    // Use utility function to create custom event, then dispatch on the input
-    const event = createNewEvent('input');
-    input.dispatchEvent(event);
-
-    // advance after change detection cycle
-    tick();
-
-    expect(component.name).toEqual('Smith');
-  }));
-});
-// #enddocregion

aio/content/examples/forms-overview/src/app/template/name/name.component.ts

@@ -1,16 +0,0 @@
-// #docplaster
-// #docregion
-import { Component } from '@angular/core';
-
-@Component({
-// #enddocregion
-  selector: 'app-template-name',
-// #docregion
-  template: `
-    Name: <input type="text" [(ngModel)]="name">
-  `
-})
-export class TemplateNameComponent {
-  name = '';
-}
-// #enddocregion

aio/content/examples/forms-overview/src/app/template/template.module.ts

@@ -1,14 +1,14 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { TemplateNameComponent } from './name/name.component';
 import { FormsModule } from '@angular/forms';
+import { FavoriteColorComponent } from './favorite-color/favorite-color.component';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule
   ],
-  declarations: [TemplateNameComponent],
-  exports: [TemplateNameComponent]
+  declarations: [FavoriteColorComponent],
+  exports: [FavoriteColorComponent]
 })
 export class TemplateModule { }