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

Commit 4dfd4a5

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

File tree

10 files changed

+283
-192
lines changed

10 files changed

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

‎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)