forked from angular/angular
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: add forms overview example for snippets (angular#25663)
PR Close angular#25663
- Loading branch information
1 parent
ad1aeec
commit 3438bfd
Showing
21 changed files
with
435 additions
and
81 deletions.
There are no files selected for viewing
10 changes: 10 additions & 0 deletions
10
aio/content/examples/forms-overview/e2e/src/app.e2e-spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { browser, element, by } from 'protractor'; | ||
|
||
describe('Forms Overview Tests', function () { | ||
|
||
beforeEach(function () { | ||
browser.get(''); | ||
}); | ||
|
||
}); | ||
|
Empty file.
Empty file.
10 changes: 10 additions & 0 deletions
10
aio/content/examples/forms-overview/src/app/app.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
<!--The content below is only a placeholder and can be replaced.--> | ||
<h1>Forms Overview</h1> | ||
|
||
<h2>Reactive</h2> | ||
|
||
<app-reactive-name></app-reactive-name> | ||
|
||
<h2>Template-Driven</h2> | ||
|
||
<app-template-name></app-template-name> |
31 changes: 31 additions & 0 deletions
31
aio/content/examples/forms-overview/src/app/app.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import { TestBed, async } from '@angular/core/testing'; | ||
import { AppComponent } from './app.component'; | ||
import { TemplateModule } from './template/template.module'; | ||
import { ReactiveModule } from './reactive/reactive.module'; | ||
|
||
describe('AppComponent', () => { | ||
|
||
beforeEach(async(() => { | ||
TestBed.configureTestingModule({ | ||
imports: [ReactiveModule, TemplateModule], | ||
declarations: [ | ||
AppComponent | ||
], | ||
}).compileComponents(); | ||
})); | ||
|
||
it('should create the app', async(() => { | ||
const fixture = TestBed.createComponent(AppComponent); | ||
const app = fixture.debugElement.componentInstance; | ||
|
||
expect(app).toBeTruthy(); | ||
})); | ||
|
||
it('should render title in a h1 tag', async(() => { | ||
const fixture = TestBed.createComponent(AppComponent); | ||
fixture.detectChanges(); | ||
|
||
const compiled = fixture.debugElement.nativeElement; | ||
expect(compiled.querySelector('h1').textContent).toContain('Forms Overview'); | ||
})); | ||
}); |
10 changes: 10 additions & 0 deletions
10
aio/content/examples/forms-overview/src/app/app.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { Component } from '@angular/core'; | ||
|
||
@Component({ | ||
selector: 'app-root', | ||
templateUrl: './app.component.html', | ||
styleUrls: ['./app.component.css'] | ||
}) | ||
export class AppComponent { | ||
title = 'forms-intro'; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import { BrowserModule } from '@angular/platform-browser'; | ||
import { NgModule } from '@angular/core'; | ||
|
||
import { AppComponent } from './app.component'; | ||
import { ReactiveModule } from './reactive/reactive.module'; | ||
import { TemplateModule } from './template/template.module'; | ||
|
||
@NgModule({ | ||
declarations: [ | ||
AppComponent, | ||
], | ||
imports: [ | ||
BrowserModule, | ||
ReactiveModule, | ||
TemplateModule | ||
], | ||
providers: [], | ||
bootstrap: [AppComponent] | ||
}) | ||
export class AppModule { } |
62 changes: 62 additions & 0 deletions
62
aio/content/examples/forms-overview/src/app/reactive/name/name.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
// #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 changes: 17 additions & 0 deletions
17
aio/content/examples/forms-overview/src/app/reactive/name/name.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
// #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 |
13 changes: 13 additions & 0 deletions
13
aio/content/examples/forms-overview/src/app/reactive/reactive.module.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { ReactiveModule } from './reactive.module'; | ||
|
||
describe('ReactiveModule', () => { | ||
let reactiveModule: ReactiveModule; | ||
|
||
beforeEach(() => { | ||
reactiveModule = new ReactiveModule(); | ||
}); | ||
|
||
it('should create an instance', () => { | ||
expect(reactiveModule).toBeTruthy(); | ||
}); | ||
}); |
14 changes: 14 additions & 0 deletions
14
aio/content/examples/forms-overview/src/app/reactive/reactive.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { CommonModule } from '@angular/common'; | ||
import { ReactiveNameComponent } from './name/name.component'; | ||
import { ReactiveFormsModule } from '@angular/forms'; | ||
|
||
@NgModule({ | ||
imports: [ | ||
CommonModule, | ||
ReactiveFormsModule | ||
], | ||
declarations: [ReactiveNameComponent], | ||
exports: [ReactiveNameComponent], | ||
}) | ||
export class ReactiveModule { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
export function createNewEvent(eventName: string, bubbles = false, cancelable = false) { | ||
let evt = document.createEvent('CustomEvent'); | ||
evt.initCustomEvent(eventName, bubbles, cancelable, null); | ||
return evt; | ||
} |
76 changes: 76 additions & 0 deletions
76
aio/content/examples/forms-overview/src/app/template/name/name.component.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,76 @@ | ||
// #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 changes: 16 additions & 0 deletions
16
aio/content/examples/forms-overview/src/app/template/name/name.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
// #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 |
13 changes: 13 additions & 0 deletions
13
aio/content/examples/forms-overview/src/app/template/template.module.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { TemplateModule } from './template.module'; | ||
|
||
describe('TemplateModule', () => { | ||
let templateModule: TemplateModule; | ||
|
||
beforeEach(() => { | ||
templateModule = new TemplateModule(); | ||
}); | ||
|
||
it('should create an instance', () => { | ||
expect(templateModule).toBeTruthy(); | ||
}); | ||
}); |
14 changes: 14 additions & 0 deletions
14
aio/content/examples/forms-overview/src/app/template/template.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { NgModule } from '@angular/core'; | ||
import { CommonModule } from '@angular/common'; | ||
import { TemplateNameComponent } from './name/name.component'; | ||
import { FormsModule } from '@angular/forms'; | ||
|
||
@NgModule({ | ||
imports: [ | ||
CommonModule, | ||
FormsModule | ||
], | ||
declarations: [TemplateNameComponent], | ||
exports: [TemplateNameComponent] | ||
}) | ||
export class TemplateModule { } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Forms Overview</title> | ||
<base href="/"> | ||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<link rel="icon" type="image/x-icon" href="favicon.ico"> | ||
</head> | ||
<body> | ||
<app-root></app-root> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
import { enableProdMode } from '@angular/core'; | ||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; | ||
|
||
import { AppModule } from './app/app.module'; | ||
import { environment } from './environments/environment'; | ||
|
||
if (environment.production) { | ||
enableProdMode(); | ||
} | ||
|
||
platformBrowserDynamic().bootstrapModule(AppModule) | ||
.catch(err => console.log(err)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"description": "Forms Overview", | ||
"files":[ | ||
"!**/*.d.ts", | ||
"!**/*.js" | ||
] | ||
} |
Oops, something went wrong.