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

+4-4
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

+13
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

+13
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

+39
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

+40
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

+39
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

+45
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

+31
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

+10
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

+18
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

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

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!-- #docregion basic-form-->
2+
<h2>Hero Detail</h2>
3+
<h3><i>A FormGroup with a single FormControl using FormBuilder</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-->
11+
12+
<!-- #docregion form-value-json -->
13+
<p>Form: {{ heroForm.value | json }}</p>
14+
<!-- #enddocregion form-value-json -->

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

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/* tslint:disable:component-class-suffix */
2+
// #docregion imports
3+
import { Component } from '@angular/core';
4+
import { FormBuilder, FormGroup } from '@angular/forms';
5+
// #enddocregion imports
6+
7+
@Component({
8+
moduleId: module.id,
9+
selector: 'hero-detail-2',
10+
templateUrl: './hero-detail-2.component.html'
11+
})
12+
// #docregion v2
13+
export class HeroDetailComponent2 {
14+
heroForm: FormGroup; // <--- heroForm is of type FormGroup
15+
16+
constructor(private fb: FormBuilder) { // <--- inject FormBuilder
17+
this.createForm();
18+
}
19+
20+
createForm() {
21+
this.heroForm = this.fb.group({
22+
name: '', // <--- the FormControl called "name"
23+
});
24+
}
25+
}
26+
// #enddocregion v2

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

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!-- #docregion -->
2+
<h2>Hero Detail</h2>
3+
<h3><i>A FormGroup with multiple FormControls</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+
<div class="form-group">
10+
<label>Street:</label>
11+
<input class="form-control" formControlName="street">
12+
</div>
13+
<div class="form-group">
14+
<label>City:</label>
15+
<input class="form-control" formControlName="city">
16+
</div>
17+
<div class="form-group">
18+
<label>State:</label>
19+
<select class="form-control" formControlName="state">
20+
<option *ngFor="let state of states">{{state}}</option>
21+
</select>
22+
</div>
23+
<div class="form-group">
24+
<label>Zip Code:</label>
25+
<input class="form-control" formControlName="zip">
26+
</div>
27+
</form>

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

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/* tslint:disable:component-class-suffix */
2+
// #docregion imports
3+
import { Component } from '@angular/core';
4+
import { FormBuilder, FormGroup } from '@angular/forms';
5+
6+
import { states } from './data-model';
7+
// #enddocregion imports
8+
9+
@Component({
10+
moduleId: module.id,
11+
selector: 'hero-detail-3',
12+
templateUrl: './hero-detail-3.component.html'
13+
})
14+
// #docregion v3
15+
export class HeroDetailComponent3 {
16+
heroForm: FormGroup;
17+
states = states;
18+
19+
constructor(private fb: FormBuilder) {
20+
this.createForm();
21+
}
22+
23+
createForm() {
24+
this.heroForm = this.fb.group({
25+
name: '',
26+
street: '',
27+
city: '',
28+
state: '',
29+
zip: ''
30+
});
31+
}
32+
}
33+
// #enddocregion v3

0 commit comments

Comments
 (0)