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

Commit 01d0a8a

Browse files
filipesilvafilipesilva
committed
update new reactive forms example
1 parent ecceee4 commit 01d0a8a

35 files changed

+254
-253
lines changed

‎public/docs/_examples/reactive-forms/ts/final.plnkr.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"description": "Angular Reactive Forms (final)",
3+
"basePath": "src/",
34
"files":[
45
"styles.css",
56

@@ -12,7 +13,7 @@
1213
"app/hero-list.component.html",
1314
"app/hero-list.component.ts",
1415

15-
"app/main-final.ts",
16+
"main-final.ts",
1617
"index-final.html"
1718
],
1819
"main": "index-final.html",

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

+40-40
Original file line numberDiff line numberDiff line change
@@ -1,40 +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'];
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 renamed to ‎public/docs/_examples/reactive-forms/ts/src/app/demo.component.html

+40-40
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,40 @@
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-
<hero-detail-1 *ngIf="demo===1"></hero-detail-1>
14-
<hero-detail-2 *ngIf="demo===2"></hero-detail-2>
15-
<hero-detail-3 *ngIf="demo===3"></hero-detail-3>
16-
<hero-detail-4 *ngIf="demo===4"></hero-detail-4>
17-
<hero-detail-5 *ngIf="demo===5"></hero-detail-5>
18-
19-
<div *ngIf="demo >= 6 && demo !== final" >
20-
21-
<h3 *ngIf="isLoading"><i>Loading heroes ... </i></h3>
22-
<h3 *ngIf="!isLoading">Select a hero:</h3>
23-
24-
<nav>
25-
<button (click)="getHeroes()" class="btn btn-primary">Refresh</button>
26-
<a *ngFor="let hero of heroes | async" (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-6 [hero]=selectedHero *ngIf="demo===6"></hero-detail-6>
34-
<hero-detail-7 [hero]=selectedHero *ngIf="demo===7"></hero-detail-7>
35-
<hero-detail-8 [hero]=selectedHero *ngIf="demo===8"></hero-detail-8>
36-
37-
</div>
38-
</div>
39-
</div>
40-
</div>
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+
<hero-detail-1 *ngIf="demo===1"></hero-detail-1>
14+
<hero-detail-2 *ngIf="demo===2"></hero-detail-2>
15+
<hero-detail-3 *ngIf="demo===3"></hero-detail-3>
16+
<hero-detail-4 *ngIf="demo===4"></hero-detail-4>
17+
<hero-detail-5 *ngIf="demo===5"></hero-detail-5>
18+
19+
<div *ngIf="demo >= 6 && demo !== final" >
20+
21+
<h3 *ngIf="isLoading"><i>Loading heroes ... </i></h3>
22+
<h3 *ngIf="!isLoading">Select a hero:</h3>
23+
24+
<nav>
25+
<button (click)="getHeroes()" class="btn btn-primary">Refresh</button>
26+
<a *ngFor="let hero of heroes | async" (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-6 [hero]=selectedHero *ngIf="demo===6"></hero-detail-6>
34+
<hero-detail-7 [hero]=selectedHero *ngIf="demo===7"></hero-detail-7>
35+
<hero-detail-8 [hero]=selectedHero *ngIf="demo===8"></hero-detail-8>
36+
37+
</div>
38+
</div>
39+
</div>
40+
</div>

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

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

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

+33-33
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
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-
import { HeroDetailComponent8 } from './hero-detail-8.component';
15-
16-
@NgModule({
17-
imports: [
18-
BrowserModule,
19-
ReactiveFormsModule,
20-
AppModule,
21-
],
22-
declarations: [ DemoComponent,
23-
HeroDetailComponent1,
24-
HeroDetailComponent2,
25-
HeroDetailComponent3,
26-
HeroDetailComponent4,
27-
HeroDetailComponent5,
28-
HeroDetailComponent6,
29-
HeroDetailComponent7,
30-
HeroDetailComponent8],
31-
bootstrap: [ DemoComponent ]
32-
})
33-
export class DemoModule { }
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+
import { HeroDetailComponent8 } from './hero-detail-8.component';
15+
16+
@NgModule({
17+
imports: [
18+
BrowserModule,
19+
ReactiveFormsModule,
20+
AppModule,
21+
],
22+
declarations: [ DemoComponent,
23+
HeroDetailComponent1,
24+
HeroDetailComponent2,
25+
HeroDetailComponent3,
26+
HeroDetailComponent4,
27+
HeroDetailComponent5,
28+
HeroDetailComponent6,
29+
HeroDetailComponent7,
30+
HeroDetailComponent8],
31+
bootstrap: [ DemoComponent ]
32+
})
33+
export class DemoModule { }

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

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

File renamed without changes.

‎public/docs/_examples/reactive-forms/ts/app/hero-detail-3a.component.ts renamed to ‎public/docs/_examples/reactive-forms/ts/src/app/hero-detail-3a.component.ts

File renamed without changes.

‎public/docs/_examples/reactive-forms/ts/app/hero-detail-4.component.html renamed to ‎public/docs/_examples/reactive-forms/ts/src/app/hero-detail-4.component.html

File renamed without changes.

‎public/docs/_examples/reactive-forms/ts/app/hero-detail-4.component.ts renamed to ‎public/docs/_examples/reactive-forms/ts/src/app/hero-detail-4.component.ts

File renamed without changes.

‎public/docs/_examples/reactive-forms/ts/app/hero-detail-5.component.html renamed to ‎public/docs/_examples/reactive-forms/ts/src/app/hero-detail-5.component.html

File renamed without changes.

‎public/docs/_examples/reactive-forms/ts/app/hero-detail-5.component.ts renamed to ‎public/docs/_examples/reactive-forms/ts/src/app/hero-detail-5.component.ts

File renamed without changes.

‎public/docs/_examples/reactive-forms/ts/app/hero-detail-6.component.html renamed to ‎public/docs/_examples/reactive-forms/ts/src/app/hero-detail-6.component.html

File renamed without changes.

‎public/docs/_examples/reactive-forms/ts/app/hero-detail-6.component.ts renamed to ‎public/docs/_examples/reactive-forms/ts/src/app/hero-detail-6.component.ts

File renamed without changes.

‎public/docs/_examples/reactive-forms/ts/app/hero-detail-7.component.html renamed to ‎public/docs/_examples/reactive-forms/ts/src/app/hero-detail-7.component.html

File renamed without changes.

‎public/docs/_examples/reactive-forms/ts/app/hero-detail-7.component.ts renamed to ‎public/docs/_examples/reactive-forms/ts/src/app/hero-detail-7.component.ts

File renamed without changes.

‎public/docs/_examples/reactive-forms/ts/app/hero-detail-8.component.html renamed to ‎public/docs/_examples/reactive-forms/ts/src/app/hero-detail-8.component.html

File renamed without changes.

‎public/docs/_examples/reactive-forms/ts/app/hero-detail-8.component.ts renamed to ‎public/docs/_examples/reactive-forms/ts/src/app/hero-detail-8.component.ts

File renamed without changes.

‎public/docs/_examples/reactive-forms/ts/app/hero-detail.component.html renamed to ‎public/docs/_examples/reactive-forms/ts/src/app/hero-detail.component.html

File renamed without changes.

‎public/docs/_examples/reactive-forms/ts/app/hero-detail.component.ts renamed to ‎public/docs/_examples/reactive-forms/ts/src/app/hero-detail.component.ts

File renamed without changes.

‎public/docs/_examples/reactive-forms/ts/app/hero-list.component.1.html renamed to ‎public/docs/_examples/reactive-forms/ts/src/app/hero-list.component.1.html

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
<!-- #docregion -->
2-
<nav>
3-
<a *ngFor="let hero of heroes | async" (click)="select(hero)">{{hero.name}}</a>
4-
</nav>
5-
6-
<div *ngIf="selectedHero">
7-
<hero-detail [hero]="selectedHero"></hero-detail>
8-
</div>
1+
<!-- #docregion -->
2+
<nav>
3+
<a *ngFor="let hero of heroes | async" (click)="select(hero)">{{hero.name}}</a>
4+
</nav>
5+
6+
<div *ngIf="selectedHero">
7+
<hero-detail [hero]="selectedHero"></hero-detail>
8+
</div>

‎public/docs/_examples/reactive-forms/ts/app/hero-list.component.html renamed to ‎public/docs/_examples/reactive-forms/ts/src/app/hero-list.component.html

+17-17
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
<!-- #docregion -->
2-
<h3 *ngIf="isLoading"><i>Loading heroes ... </i></h3>
3-
<h3 *ngIf="!isLoading">Select a hero:</h3>
4-
5-
<nav>
6-
<button (click)="getHeroes()" class="btn btn-primary">Refresh</button>
7-
<a *ngFor="let hero of heroes | async" (click)="select(hero)">{{hero.name}}</a>
8-
</nav>
9-
10-
<div *ngIf="selectedHero">
11-
<hr>
12-
<h2>Hero Detail</h2>
13-
<h3>Editing: {{selectedHero.name}}</h3>
14-
<!-- #docregion hero-binding -->
15-
<hero-detail [hero]="selectedHero"></hero-detail>
16-
<!-- #enddocregion hero-binding -->
17-
</div>
1+
<!-- #docregion -->
2+
<h3 *ngIf="isLoading"><i>Loading heroes ... </i></h3>
3+
<h3 *ngIf="!isLoading">Select a hero:</h3>
4+
5+
<nav>
6+
<button (click)="getHeroes()" class="btn btn-primary">Refresh</button>
7+
<a *ngFor="let hero of heroes | async" (click)="select(hero)">{{hero.name}}</a>
8+
</nav>
9+
10+
<div *ngIf="selectedHero">
11+
<hr>
12+
<h2>Hero Detail</h2>
13+
<h3>Editing: {{selectedHero.name}}</h3>
14+
<!-- #docregion hero-binding -->
15+
<hero-detail [hero]="selectedHero"></hero-detail>
16+
<!-- #enddocregion hero-binding -->
17+
</div>

0 commit comments

Comments
 (0)