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

Commit 32248c2

Browse files
kapunahelewongkapunahelewong
committed
refactor detail components
1 parent 6ef1000 commit 32248c2

10 files changed

+322
-272
lines changed

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

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,31 @@
1-
import { NgModule } from '@angular/core';
2-
import { BrowserModule } from '@angular/platform-browser';
3-
import { ReactiveFormsModule } from '@angular/forms';
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
import { ReactiveFormsModule } from '@angular/forms';
44

5-
import { AppModule } from './app.module';
6-
import { DemoComponent } from './demo.component';
7-
import { components } from './hero-detail-versions.component';
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';
814

915
@NgModule({
1016
imports: [
1117
BrowserModule,
1218
ReactiveFormsModule,
1319
AppModule,
1420
],
15-
declarations: [ DemoComponent, ...components ],
21+
declarations: [ DemoComponent,
22+
HeroDetailComponent1,
23+
HeroDetailComponent2,
24+
HeroDetailComponent3,
25+
HeroDetailComponent4,
26+
HeroDetailComponent5,
27+
HeroDetailComponent6,
28+
HeroDetailComponent7 ],
1629
bootstrap: [ DemoComponent ]
1730
})
1831
export class DemoModule { }

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

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

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

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

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

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

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/* tslint:disable:component-class-suffix */
2+
// #docplaster
3+
// #docregion
4+
5+
import { Component, Input, OnChanges } from '@angular/core';
6+
import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
7+
import { Address, Hero, states } from './data-model';
8+
9+
10+
////////// 4 /////////////////////
11+
12+
@Component({
13+
moduleId: module.id,
14+
selector: 'hero-detail-4',
15+
templateUrl: './hero-detail-4.component.html'
16+
})
17+
// #docregion v4
18+
export class HeroDetailComponent4 {
19+
heroForm: FormGroup;
20+
states = states;
21+
22+
constructor(private fb: FormBuilder) {
23+
this.createForm();
24+
}
25+
26+
createForm() {
27+
this.heroForm = this.fb.group({ // <-- the parent FormGroup
28+
name: '',
29+
address: this.fb.group({ // <-- the child FormGroup
30+
street: '',
31+
city: '',
32+
state: '',
33+
zip: ''
34+
})
35+
});
36+
}
37+
}
38+
// #enddocregion v4
39+

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
/* tslint:disable:component-class-suffix */
2+
// #docplaster
3+
// #docregion
4+
5+
import { Component, Input, OnChanges } from '@angular/core';
6+
import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
7+
import { Address, Hero, states } from './data-model';
8+
9+
////////// 5 ////////////////////
10+
11+
@Component({
12+
moduleId: module.id,
13+
selector: 'hero-detail-5',
14+
templateUrl: './hero-detail-4.component.html'
15+
})
16+
// #docregion v5
17+
export class HeroDetailComponent5 implements OnChanges {
18+
@Input() hero: Hero;
19+
20+
heroForm: FormGroup;
21+
states = states;
22+
23+
constructor(private fb: FormBuilder) {
24+
this.createForm();
25+
}
26+
27+
createForm() {
28+
// #docregion hero-form-model
29+
this.heroForm = this.fb.group({
30+
name: '',
31+
address: this.fb.group({
32+
street: '',
33+
city: '',
34+
state: '',
35+
zip: ''
36+
})
37+
});
38+
// #enddocregion hero-form-model
39+
}
40+
41+
// #docregion patch-value-on-changes
42+
ngOnChanges() { // <-- wrap patchValue in ngOnChanges
43+
this.heroForm.reset();
44+
// #docregion patch-value
45+
this.heroForm.patchValue({
46+
name: this.hero.name
47+
});
48+
// #enddocregion patch-value
49+
}
50+
// #enddocregion patch-value-on-changes
51+
}
52+
53+
// #enddocregion v5

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/* tslint:disable:component-class-suffix */
2+
// #docplaster
3+
// #docregion
4+
5+
import { Component, Input, OnChanges } from '@angular/core';
6+
import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
7+
import { Address, Hero, states } from './data-model';
8+
9+
10+
///////// 6 ////////////////////
11+
12+
@Component({
13+
moduleId: module.id,
14+
selector: 'hero-detail-6',
15+
templateUrl: './hero-detail-4.component.html'
16+
})
17+
// #docregion v6
18+
export class HeroDetailComponent6 implements OnChanges {
19+
@Input() hero: Hero;
20+
21+
heroForm: FormGroup;
22+
states = states;
23+
24+
constructor(private fb: FormBuilder) {
25+
this.createForm();
26+
}
27+
28+
createForm() {
29+
// #docregion address-form-group
30+
this.heroForm = this.fb.group({
31+
name: '',
32+
address: this.fb.group(new Address()) // <-- a FormGroup with a new address
33+
});
34+
// #enddocregion address-form-group
35+
}
36+
37+
// #docregion set-value-on-changes
38+
ngOnChanges() {
39+
this.heroForm.reset();
40+
// #docregion set-value
41+
this.heroForm.setValue({
42+
name: this.hero.name,
43+
// #docregion set-value-address
44+
address: this.hero.addresses[0] || new Address()
45+
// #enddocregion set-value-address
46+
});
47+
// #enddocregion set-value
48+
}
49+
// #enddocregion set-value-on-changes
50+
51+
}
52+

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

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/* tslint:disable:component-class-suffix */
2+
// #docplaster
3+
// #docregion
4+
5+
import { Component, Input, OnChanges } from '@angular/core';
6+
import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
7+
import { Address, Hero, states } from './data-model';
8+
9+
////////// 7 ////////////////////
10+
11+
@Component({
12+
moduleId: module.id,
13+
selector: 'hero-detail-7',
14+
templateUrl: './hero-detail-5.component.html'
15+
})
16+
// #docregion v7
17+
export class HeroDetailComponent7 implements OnChanges {
18+
@Input() hero: Hero;
19+
20+
heroForm: FormGroup;
21+
states = states;
22+
23+
constructor(private fb: FormBuilder) {
24+
this.createForm();
25+
}
26+
27+
createForm() {
28+
// #docregion secretLairs-form-array
29+
this.heroForm = this.fb.group({
30+
name: '',
31+
secretLairs: this.fb.array([]) // <-- secretLairs as an empty FormArray
32+
});
33+
// #enddocregion secretLairs-form-array
34+
}
35+
36+
// #docregion onchanges
37+
ngOnChanges() {
38+
this.heroForm.reset();
39+
this.heroForm.patchValue({
40+
name: this.hero.name
41+
});
42+
this.setAddresses(this.hero.addresses);
43+
}
44+
// #enddocregion onchanges
45+
46+
// #docregion get-secret-lairs
47+
get secretLairs(): FormArray {
48+
return this.heroForm.get('secretLairs') as FormArray;
49+
};
50+
// #enddocregion get-secret-lairs
51+
52+
// #docregion set-addresses
53+
setAddresses(addresses: Address[]) {
54+
const addressFGs = addresses.map(address => this.fb.group(address));
55+
const addressFormArray = this.fb.array(addressFGs);
56+
this.heroForm.setControl('secretLairs', addressFormArray);
57+
}
58+
// #enddocregion set-addresses
59+
60+
// #docregion add-lair
61+
addLair() {
62+
this.secretLairs.push(this.fb.group(new Address()));
63+
}
64+
// #enddocregion add-lair
65+
}
66+
// #enddocregion v7
67+

0 commit comments

Comments
 (0)