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

Commit 7d897d0

Browse files
wardbellwardbell
committed
docs(reactive-forms): more ward than you can stand
1 parent 9204bf5 commit 7d897d0

10 files changed

+281
-192
lines changed

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

-1
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

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

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

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

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

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

-118
This file was deleted.

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

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

+2-2
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)