cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: incorporated forms overview review feedback (#25663)

Browse Source 
PR Close #25663
This commit is contained in:
Brandon Roberts
2018-09-17 11:00:01 -05:00
committed by Kara Erickson
parent 79a2567aa3
commit 8d098d389a
12 changed files with 270 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
aio/content/examples/forms-overview/src/app/app.component.html
View File

@ -3,8 +3,8 @@
<h2>Reactive</h2>
<app-reactive-name></app-reactive-name>
<app-reactive-favorite-color></app-reactive-favorite-color>
<h2>Template-Driven</h2>
<app-template-name></app-template-name>
<app-template-favorite-color></app-template-favorite-color>

50
aio/content/examples/forms-overview/src/app/reactive/favorite-color/favorite-color.component.spec.ts Normal file
View File

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

19
aio/content/examples/forms-overview/src/app/reactive/favorite-color/favorite-color.component.ts Normal file
View File

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

62
aio/content/examples/forms-overview/src/app/reactive/name/name.component.spec.ts
View File

@ -1,62 +0,0 @@
// #docregion
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { ReactiveNameComponent } from './name.component';
import { createNewEvent } from '../../shared/utils';
// #docregion tests
describe('Reactive Name Component', () => {
// #enddocregion tests
let component: ReactiveNameComponent;
let fixture: ComponentFixture<ReactiveNameComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ReactiveFormsModule],
declarations: [ReactiveNameComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ReactiveNameComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
// #docregion tests
it('should update the value in the control', () => {
// update the control value
component.name.setValue('Nancy');
// query the element
const input = fixture.nativeElement.querySelector('input');
// check its value
expect(input.value).toBe('Nancy');
});
it('should update the value of the input field', () => {
// update the control value
component.name.setValue('Nancy');
// 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);
expect(fixture.componentInstance.name.value).toEqual('Smith');
});
});
// #enddocregion

17
aio/content/examples/forms-overview/src/app/reactive/name/name.component.ts
View File

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

6
aio/content/examples/forms-overview/src/app/reactive/reactive.module.ts
View File

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

56
aio/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.spec.ts Normal file
View File

@ -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
});

18
aio/content/examples/forms-overview/src/app/template/favorite-color/favorite-color.component.ts Normal file
View File

@ -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() {
}
}

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

@ -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

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

@ -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

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

@ -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 { }