Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 60553d8

Browse files
kapunahelewongkapunahelewong
committed
docs(reactive-forms): add reactive forms guide
1 parent 09f79e3 commit 60553d8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+3825
-6
lines changed

‎public/docs/_examples/forms/ts/app/hero-form.component.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ <h1>Hero Form</h1>
4444
</div>
4545

4646
<!-- #docregion submit-button -->
47-
<button type="submit" class="btn btn-default" [disabled]="!heroForm.form.valid">Submit</button>
47+
<button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
4848
<!-- #enddocregion submit-button -->
4949
<!-- #docregion new-hero-button-form-reset -->
5050
<button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
@@ -84,7 +84,7 @@ <h2>You submitted the following:</h2>
8484
<div class="col-xs-9 pull-left">{{ model.power }}</div>
8585
</div>
8686
<br>
87-
<button class="btn btn-default" (click)="submitted=false">Edit</button>
87+
<button class="btn btn-primary" (click)="submitted=false">Edit</button>
8888
</div>
8989
<!-- #enddocregion submitted -->
9090
</div>
@@ -138,7 +138,7 @@ <h1>Hero Form</h1>
138138

139139
<!-- #enddocregion powers -->
140140
<!-- #docregion start -->
141-
<button type="submit" class="btn btn-default">Submit</button>
141+
<button type="submit" class="btn btn-success">Submit</button>
142142

143143
</form>
144144
</div>
@@ -176,7 +176,7 @@ <h1>Hero Form</h1>
176176
</div>
177177

178178
<!-- #enddocregion ngModel-2-->
179-
<button type="submit" class="btn btn-default">Submit</button>
179+
<button type="submit" class="btn btn-success">Submit</button>
180180

181181
</form>
182182
</div>

‎public/docs/_examples/reactive-forms/ts/app/app.component.1.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
moduleId: module.id,
6+
selector: 'my-app',
7+
template: `
8+
<div class="container">
9+
<h1>Reactive Forms</h1>
10+
<hero-detail></hero-detail>
11+
</div>`
12+
})
13+
export class AppComponent { }

‎public/docs/_examples/reactive-forms/ts/app/app.component.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// #docregion
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
moduleId: module.id,
6+
selector: 'my-app',
7+
template: `
8+
<div class="container">
9+
<h1>Reactive Forms</h1>
10+
<hero-list></hero-list>
11+
</div>`
12+
})
13+
export class AppComponent { }

‎public/docs/_examples/reactive-forms/ts/app/app.module.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// #docplaster
2+
// #docregion
3+
// #docregion v1
4+
import { NgModule } from '@angular/core';
5+
import { BrowserModule } from '@angular/platform-browser';
6+
import { ReactiveFormsModule } from '@angular/forms'; // <-- #1 import module
7+
8+
import { AppComponent } from './app.component';
9+
import { HeroDetailComponent } from './hero-detail.component'; // <-- #1 import component
10+
// #enddocregion v1
11+
import { HeroListComponent } from './hero-list.component';
12+
13+
import { HeroService } from './hero.service'; // <-- #1 import service
14+
// #docregion v1
15+
16+
@NgModule({
17+
imports: [
18+
BrowserModule,
19+
ReactiveFormsModule // <-- #2 add to Angular module imports
20+
],
21+
declarations: [
22+
AppComponent,
23+
HeroDetailComponent, // <-- #3 declare app component
24+
// #enddocregion v1
25+
HeroListComponent
26+
// #docregion v1
27+
],
28+
// #enddocregion v1
29+
exports: [ // export for the DemoModule
30+
AppComponent,
31+
HeroDetailComponent,
32+
HeroListComponent
33+
],
34+
providers: [ HeroService ], // <-- #4 provide HeroService
35+
// #docregion v1
36+
bootstrap: [ AppComponent ]
37+
})
38+
export class AppModule { }
39+
// #enddocregion v1

‎public/docs/_examples/reactive-forms/ts/app/data-model.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// #docregion
2+
// #docregion model-classes
3+
export class Hero {
4+
id = 0;
5+
name = '';
6+
addresses: Address[];
7+
}
8+
9+
export class Address {
10+
street = '';
11+
city = '';
12+
state = '';
13+
zip = '';
14+
}
15+
// #enddocregion model-classes
16+
17+
export const heroes: Hero[] = [
18+
{
19+
id: 1,
20+
name: 'Whirlwind',
21+
addresses: [
22+
{street: '123 Main', city: 'Anywhere', state: 'CA', zip: '94801'},
23+
{street: '456 Maple', city: 'Somewhere', state: 'VA', zip: '23226'},
24+
]
25+
},
26+
{
27+
id: 2,
28+
name: 'Bombastic',
29+
addresses: [
30+
{street: '789 Elm', city: 'Smallville', state: 'OH', zip: '04501'},
31+
]
32+
},
33+
{
34+
id: 3,
35+
name: 'Magneta',
36+
addresses: [ ]
37+
},
38+
];
39+
40+
export const states = ['CA', 'MD', 'OH', 'VA'];

‎public/docs/_examples/reactive-forms/ts/app/demo.component.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<div class="container">
2+
<h1>Reactive Forms</h1>
3+
<h4><i>Pick a demo:</i>
4+
<select [selectedIndex]="demo - 1" (change)="selectDemo($event.target.selectedIndex)">
5+
<option *ngFor="let demo of demos">{{demo}}</option>
6+
</select>
7+
</h4>
8+
9+
<hr>
10+
11+
<div class="demo">
12+
<hero-list *ngIf="demo===final"></hero-list>
13+
14+
<hero-detail-1 *ngIf="demo===1"></hero-detail-1>
15+
<hero-detail-2 *ngIf="demo===2"></hero-detail-2>
16+
<hero-detail-3 *ngIf="demo===3"></hero-detail-3>
17+
<hero-detail-4 *ngIf="demo===4"></hero-detail-4>
18+
19+
<div *ngIf="demo >= 5 && demo !== final" >
20+
21+
<p *ngIf="!heroes"><b><i>Loading heroes ... </i></b></p>
22+
<h3 *ngIf="heroes">Select a hero:</h3>
23+
24+
<nav>
25+
<button (click)="getHeroes()" class="btn btn-primary">Refresh</button>
26+
<a *ngFor="let hero of heroes" (click)="select(hero)">{{hero.name}}</a>
27+
</nav>
28+
29+
<div *ngIf="selectedHero">
30+
<hr>
31+
<h2>Hero Detail</h2>
32+
<h3>Editing: {{selectedHero.name}}</h3>
33+
<hero-detail-5 [hero]=selectedHero *ngIf="demo===5"></hero-detail-5>
34+
<hero-detail-6 [hero]=selectedHero *ngIf="demo===6"></hero-detail-6>
35+
<hero-detail-7 [hero]=selectedHero *ngIf="demo===7"></hero-detail-7>
36+
</div>
37+
</div>
38+
</div>
39+
</div>

‎public/docs/_examples/reactive-forms/ts/app/demo.component.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/* tslint:disable:member-ordering */
2+
import { Component } from '@angular/core';
3+
4+
import { Hero } from './data-model';
5+
import { HeroService } from './hero.service';
6+
7+
@Component({
8+
moduleId: module.id,
9+
selector: 'my-app',
10+
templateUrl: 'demo.component.html'
11+
})
12+
export class DemoComponent {
13+
14+
demos: string[] = [
15+
'Simple FormControl',
16+
'Simple FormBuilder group',
17+
'Group with multiple controls',
18+
'Nested FormBuilder group',
19+
'PatchValue',
20+
'SetValue',
21+
'FormArray',
22+
'Final'].map(n => n + ' Demo');
23+
24+
final = this.demos.length;
25+
demo = this.final; // current demo
26+
27+
heroes: Hero[];
28+
selectedHero: Hero;
29+
30+
constructor(private heroService: HeroService) { }
31+
32+
getHeroes() {
33+
this.selectedHero = undefined;
34+
this.heroes = undefined;
35+
return this.heroService.getHeroes()
36+
.then(heroes => this.heroes = heroes);
37+
}
38+
39+
select(hero: Hero) { this.selectedHero = hero; }
40+
41+
selectDemo(demo: number) {
42+
this.demo = demo + 1;
43+
this.getHeroes();
44+
}
45+
}

‎public/docs/_examples/reactive-forms/ts/app/demo.module.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
import { ReactiveFormsModule } from '@angular/forms';
4+
5+
import { AppModule } from './app.module';
6+
import { DemoComponent } from './demo.component';
7+
import { HeroDetailComponent1 } from './hero-detail-1.component';
8+
import { HeroDetailComponent2 } from './hero-detail-2.component';
9+
import { HeroDetailComponent3 } from './hero-detail-3.component';
10+
import { HeroDetailComponent4 } from './hero-detail-4.component';
11+
import { HeroDetailComponent5 } from './hero-detail-5.component';
12+
import { HeroDetailComponent6 } from './hero-detail-6.component';
13+
import { HeroDetailComponent7 } from './hero-detail-7.component';
14+
15+
@NgModule({
16+
imports: [
17+
BrowserModule,
18+
ReactiveFormsModule,
19+
AppModule,
20+
],
21+
declarations: [ DemoComponent,
22+
HeroDetailComponent1,
23+
HeroDetailComponent2,
24+
HeroDetailComponent3,
25+
HeroDetailComponent4,
26+
HeroDetailComponent5,
27+
HeroDetailComponent6,
28+
HeroDetailComponent7 ],
29+
bootstrap: [ DemoComponent ]
30+
})
31+
export class DemoModule { }

‎public/docs/_examples/reactive-forms/ts/app/hero-detail-1.component.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!-- #docregion basic-form-->
2+
<h2>Hero Detail</h2>
3+
<h3><i>FormGroup with a single FormControl</i></h3>
4+
<form [formGroup]="heroForm" novalidate>
5+
<div class="form-group">
6+
<label>Name:</label>
7+
<input class="form-control" formControlName="name">
8+
</div>
9+
</form>
10+
<!-- #enddocregion basic-form-->

‎public/docs/_examples/reactive-forms/ts/app/hero-detail-1.component.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/* tslint:disable:component-class-suffix */
2+
// #docregion imports
3+
import { Component } from '@angular/core';
4+
import { FormControl, FormGroup } from '@angular/forms';
5+
// #enddocregion
6+
7+
@Component({
8+
moduleId: module.id,
9+
selector: 'hero-detail-1',
10+
templateUrl: './hero-detail-1.component.html'
11+
})
12+
// #docregion v1
13+
export class HeroDetailComponent1 {
14+
heroForm = new FormGroup ({
15+
name: new FormControl()
16+
});
17+
}
18+
// #enddocregion v1

0 commit comments

Comments
 (0)