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

Commit 36eb3ef

Browse files
wardbellwardbell
committed
docs(reactive-forms): more ward than you can stand
1 parent 619e1ad commit 36eb3ef

File tree

10 files changed

+280
-192
lines changed

10 files changed

+280
-192
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
// #docplaster
21
// #docregion
32
import { NgModule } from '@angular/core';
43
import { BrowserModule } from '@angular/platform-browser';

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

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

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
import { ReactiveFormsModule } from '@angular/forms'; // <-- #1 import the module
4+
import { DemoComponent } from './demo.component';
5+
import { components } from './hero-signup-versions.component';
6+
import { HeroSignUpComponent } from './hero-signup.component';
7+
8+
@NgModule({
9+
imports: [
10+
BrowserModule,
11+
ReactiveFormsModule
12+
],
13+
declarations: [ DemoComponent, HeroSignUpComponent, ...components ],
14+
bootstrap: [ DemoComponent ]
15+
})
16+
export class DemoModule { }

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
<!-- K-girl: refactor into separate html files -->
2+
3+
4+
15
<!-- #docplaster -->
26
<!-- #docregion html-final -->
37
<div class="wrapper">

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

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
// #docplaster
2+
// #docregion
3+
import { Component } from '@angular/core';
4+
import { FormBuilder, FormControl, FormGroup} from '@angular/forms';
5+
6+
@Component({
7+
moduleId: module.id,
8+
selector: 'hero-signup-1',
9+
templateUrl: './hero-signup-1.component.html'
10+
})
11+
// #docregion v1
12+
export class HeroSignUpComponent1 {
13+
form = new FormGroup ({
14+
name: new FormControl(),
15+
username: new FormControl(),
16+
password: new FormControl(),
17+
confirm: new FormControl()
18+
});
19+
}
20+
// #enddocregion v1
21+
22+
@Component({
23+
moduleId: module.id,
24+
selector: 'hero-signup-2',
25+
templateUrl: './hero-signup-2.component.html'
26+
})
27+
// #docregion v2
28+
export class HeroSignUpComponent2 {
29+
form: FormGroup;
30+
constructor(private _fb: FormBuilder) {
31+
this.form = this._fb.group({
32+
name: '',
33+
username: '',
34+
password: '',
35+
confirm: ''
36+
});
37+
}
38+
}
39+
// #enddocregion v2
40+
41+
@Component({
42+
moduleId: module.id,
43+
selector: 'hero-signup-3',
44+
templateUrl: './hero-signup-3.component.html'
45+
})
46+
// #enddocregion v3
47+
export class HeroSignUpComponent3 {
48+
form: FormGroup;
49+
constructor(private _fb: FormBuilder) {
50+
this.form = this._fb.group({
51+
name: '',
52+
username: '',
53+
password: '',
54+
confirm: '',
55+
street: '',
56+
city: '',
57+
state: '',
58+
zip: ''
59+
});
60+
}
61+
}
62+
// #enddocregion v3
63+
64+
@Component({
65+
moduleId: module.id,
66+
selector: 'hero-signup-4',
67+
templateUrl: './hero-signup-4.component.html'
68+
})
69+
// #enddocregion v4
70+
export class HeroSignUpComponent4 {
71+
form: FormGroup;
72+
constructor(private _fb: FormBuilder) {
73+
this.form = this._fb.group({
74+
name: '',
75+
username: '',
76+
password: '',
77+
confirm: '',
78+
address: this._fb.group({
79+
street: '',
80+
city: '',
81+
state: '',
82+
zip: ''
83+
})
84+
});
85+
}
86+
}
87+
// #enddocregion v4
88+
89+
@Component({
90+
moduleId: module.id,
91+
selector: 'hero-signup-5',
92+
templateUrl: './hero-signup-5.component.html'
93+
})
94+
// #docregion v5
95+
export class HeroSignUpComponent5 {
96+
form: FormGroup;
97+
constructor(private _fb: FormBuilder) {
98+
this.form = this._fb.group({
99+
name: '',
100+
username: '',
101+
password: '',
102+
confirm: '',
103+
address: this._fb.group({
104+
street: '',
105+
city: '',
106+
state: '',
107+
zip: ''
108+
})
109+
});
110+
111+
this.form.patchValue({
112+
name: 'Nancy'
113+
});
114+
}
115+
}
116+
// #enddocregion v5
117+
118+
@Component({
119+
moduleId: module.id,
120+
selector: 'hero-signup-6',
121+
templateUrl: './hero-signup-6.component.html'
122+
})
123+
// #docregion v6
124+
export class HeroSignUpComponent6 {
125+
form: FormGroup;
126+
constructor(private _fb: FormBuilder) {
127+
this.form = this._fb.group({
128+
name: '',
129+
username: '',
130+
password: '',
131+
confirm: '',
132+
address: this._fb.group({
133+
street: '',
134+
city: '',
135+
state: '',
136+
zip: ''
137+
})
138+
});
139+
140+
this.form.setValue({
141+
name: 'Nancy',
142+
username: 'NancyD',
143+
password: '',
144+
confirm: '',
145+
address: {
146+
street: '123 Fake Street',
147+
city: 'San Francisco',
148+
state: 'CA',
149+
zip: '12345'
150+
}
151+
});
152+
}
153+
}
154+
// #enddocregion v6
155+
156+
export const components = [
157+
HeroSignUpComponent1,
158+
HeroSignUpComponent2,
159+
HeroSignUpComponent3,
160+
HeroSignUpComponent4,
161+
HeroSignUpComponent5,
162+
HeroSignUpComponent6,
163+
];

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

Lines changed: 0 additions & 118 deletions
This file was deleted.

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

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33
// #docregion reactive-comp
44
// #docregion reactive-comp-imports
55
import { Component } from '@angular/core';
6-
import { AbstractControl, FormArray, FormGroup,
7-
FormBuilder, Validators } from '@angular/forms';
6+
import { AbstractControl, FormArray, FormGroup, FormBuilder } from '@angular/forms';
87
// #enddocregion reactive-comp-imports
98

109
function passwordMatcher(c: AbstractControl) {
@@ -14,7 +13,7 @@ function passwordMatcher(c: AbstractControl) {
1413
// #docregion reactive-comp-metadata
1514
@Component({
1615
moduleId: module.id,
17-
selector: 'reactive-form',
16+
selector: 'hero-signup',
1817
templateUrl: './hero-signup.component.html'
1918
})
2019
// #enddocregion reactive-comp-metadata
@@ -31,8 +30,10 @@ export class HeroSignUpComponent {
3130
username: '',
3231
password: '',
3332
confirm: ''
34-
}, {validator:passwordMatcher}),
33+
}, {validator: passwordMatcher}),
34+
// #docregion use-build-array
3535
addresses: this.buildArray()
36+
// #enddocregion use-build-array
3637
});
3738
}
3839
// #docregion build-array
@@ -61,12 +62,3 @@ export class HeroSignUpComponent {
6162
// #enddocregion add-group
6263
// #enddocregion reactive-comp
6364
// #docregion
64-
// #docregion form-array-class-constructor
65-
constructor(private _fb: FormBuilder) {
66-
this.form = this._fb.group({
67-
...
68-
addresses: this.buildArray()
69-
});
70-
}
71-
72-
// #enddocregion form-array-class-constructor

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
2-
import { AppModule } from './app.module';
2+
import { DemoModule } from './demo.module';
33

4-
platformBrowserDynamic().bootstrapModule(AppModule);
4+
platformBrowserDynamic().bootstrapModule(DemoModule);

0 commit comments

Comments
 (0)