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

Commit b173f4e

Browse files
kapunahelewongkapunahelewong
committed
saving some +makeExample updates
1 parent 4b97942 commit b173f4e

File tree

5 files changed

+217
-205
lines changed

5 files changed

+217
-205
lines changed

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

Lines changed: 19 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,19 @@
1-
<!-- K-girl: refactor into separate html files -->
2-
3-
4-
5-
<!-- #docplaster -->
6-
<!-- #docregion html-final -->
7-
<div class="wrapper">
8-
<h2>Hero Sign Up</h2>
9-
<form novalidate [formGroup]="form">
10-
<!-- #docregion html-begin -->
11-
<div class="form-group">
12-
<label>Name:</label>
13-
<input class="form-control" formControlName="name">
14-
</div>
15-
<div class="form-group">
16-
<label>Username:</label>
17-
<input class="form-control" formControlName="username">
18-
</div>
19-
<div class="form-group">
20-
<label>Password:</label>
21-
<input class="form-control" formControlName="password">
22-
</div>
23-
<div class="form-group">
24-
<label>Confirm Password:</label>
25-
<input class="form-control" formControlName="confirm">
26-
</div>
27-
<!-- #enddocregion html-begin -->
28-
29-
<div formArrayName="addresses" class="addresses">
30-
<div *ngFor="let address of addresses.controls; let i=index" [formGroupName]="i">
31-
<h3>Fortress of Solitude</h3>
32-
<!-- #docregion add-controls -->
33-
<div class="form-group">
34-
<label>Street:</label>
35-
<input class="form-control" formControlName="street">
36-
</div>
37-
<div class="form-group">
38-
<label>City:</label>
39-
<input class="form-control" formControlName="city">
40-
</div>
41-
<div class="form-group">
42-
<label>State:</label>
43-
<select class="form-control" formControlName="state">
44-
<option>CA</option>
45-
<option>NY</option>
46-
</select>
47-
</div>
48-
<div class="form-group">
49-
<label>Zip Code:</label>
50-
<input class="form-control" formControlName="zip">
51-
</div>
52-
<!-- #enddocregion add-controls -->
53-
</div>
54-
<button (click)="add()">Add Another Secret Lair</button>
55-
</div>
56-
</form>
57-
<!-- #docregion form-value-json -->
58-
<p>Form: {{ form.value | json }}</p>
59-
<!-- #enddocregion form-value-json -->
60-
<!-- <p>First Name FormControl value: {{ form.get('first').value}}</p> -->
61-
<p>Form status: {{ form.status }}</p>
62-
<p>Password status: {{ form.get('account.password').status}}</p>
63-
<p>Account status: {{ form.get('account').errors | json }}</p>
64-
</div>
65-
66-
<!-- #enddocregion html-final -->
67-
68-
69-
70-
<!-- #docplaster -->
71-
<!-- #docregion html-first-->
72-
<div class="wrapper">
73-
<h2>Hero Sign Up</h2>
74-
<form novalidate [formGroup]="form">
75-
<div class="form-group">
76-
<label>Name:</label>
77-
<input class="form-control" formControlName="name">
78-
</div>
79-
<div formGroupName="account">
80-
<div class="form-group">
81-
<label>Username:</label>
82-
<input class="form-control" formControlName="username">
83-
</div>
84-
<div class="form-group">
85-
<label>Password:</label>
86-
<input class="form-control" formControlName="password">
87-
</div>
88-
<div class="form-group">
89-
<label>Confirm Password:</label>
90-
<input class="form-control" formControlName="confirm">
91-
</div>
92-
</div>
93-
<h3>Fortress of Solitude</h3>
94-
<!-- #docregion form-group -->
95-
<!-- #docregion add-controls -->
96-
<div formGroupName="address">
97-
<div class="form-group">
98-
<label>Street:</label>
99-
<input class="form-control" formControlName="street">
100-
</div>
101-
<div class="form-group">
102-
<label>City:</label>
103-
<input class="form-control" formControlName="city">
104-
</div>
105-
<div class="form-group">
106-
<label>State:</label>
107-
<select class="form-control" formControlName="state">
108-
<option>CA</option>
109-
<option>NY</option>
110-
</select>
111-
</div>
112-
<div class="form-group">
113-
<label>Zip Code:</label>
114-
<input class="form-control" formControlName="zip">
115-
</div>
116-
</div>
117-
<!-- #enddocregion add-controls -->
118-
<!-- #enddocregion form-group -->
119-
</div>
120-
<button (click)="add()">Add Another Secret Lair</button>
121-
</div>
122-
</form>
123-
<!-- #docregion form-value-json -->
124-
<p>Form: {{ form.value | json }}</p>
125-
<!-- #enddocregion form-value-json -->
126-
<!-- #docregion inspecting -->
127-
<p>First Name FormControl value: {{ form.get('first').value}}</p>
128-
<!-- #enddocregion inspecting -->
129-
<p>Form status: {{ form.status }}</p>
130-
<!-- #docregion get-inspect -->
131-
<p>Street value: {{ form.get('address.street').value}}</p>
132-
<!-- #enddocregion get-inspect-->
133-
134-
</div>
135-
136-
<!-- #enddocregion html-first -->
137-
138-
139-
140-
1+
<!-- #docregion -->
2+
<form novalidate [formGroup]="form">
3+
<div class="form-group">
4+
<label>Name:</label>
5+
<input class="form-control" formControlName="name">
6+
</div>
7+
<div class="form-group">
8+
<label>Username:</label>
9+
<input class="form-control" formControlName="username">
10+
</div>
11+
<div class="form-group">
12+
<label>Password:</label>
13+
<input class="form-control" formControlName="password">
14+
</div>
15+
<div class="form-group">
16+
<label>Confirm Password:</label>
17+
<input class="form-control" formControlName="confirm">
18+
</div>
19+
</form>

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

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
<!-- K-girl: refactor into separate html files -->
2+
3+
4+
5+
<!-- #docplaster -->
6+
<!-- #docregion html-final -->
7+
<div class="wrapper">
8+
<h2>Hero Sign Up</h2>
9+
<form novalidate [formGroup]="form">
10+
<!-- #docregion html-begin -->
11+
<div class="form-group">
12+
<label>Name:</label>
13+
<input class="form-control" formControlName="name">
14+
</div>
15+
<div class="form-group">
16+
<label>Username:</label>
17+
<input class="form-control" formControlName="username">
18+
</div>
19+
<div class="form-group">
20+
<label>Password:</label>
21+
<input class="form-control" formControlName="password">
22+
</div>
23+
<div class="form-group">
24+
<label>Confirm Password:</label>
25+
<input class="form-control" formControlName="confirm">
26+
</div>
27+
<!-- #enddocregion html-begin -->
28+
29+
<div formArrayName="addresses" class="addresses">
30+
<div *ngFor="let address of addresses.controls; let i=index" [formGroupName]="i">
31+
<h3>Fortress of Solitude</h3>
32+
<!-- #docregion add-controls -->
33+
<div class="form-group">
34+
<label>Street:</label>
35+
<input class="form-control" formControlName="street">
36+
</div>
37+
<div class="form-group">
38+
<label>City:</label>
39+
<input class="form-control" formControlName="city">
40+
</div>
41+
<div class="form-group">
42+
<label>State:</label>
43+
<select class="form-control" formControlName="state">
44+
<option>CA</option>
45+
<option>NY</option>
46+
</select>
47+
</div>
48+
<div class="form-group">
49+
<label>Zip Code:</label>
50+
<input class="form-control" formControlName="zip">
51+
</div>
52+
<!-- #enddocregion add-controls -->
53+
</div>
54+
<button (click)="add()">Add Another Secret Lair</button>
55+
</div>
56+
</form>
57+
<!-- #docregion form-value-json -->
58+
<p>Form: {{ form.value | json }}</p>
59+
<!-- #enddocregion form-value-json -->
60+
<!-- <p>First Name FormControl value: {{ form.get('first').value}}</p> -->
61+
<p>Form status: {{ form.status }}</p>
62+
<p>Password status: {{ form.get('account.password').status}}</p>
63+
<p>Account status: {{ form.get('account').errors | json }}</p>
64+
</div>
65+
66+
<!-- #enddocregion html-final -->
67+
68+
69+
70+
<!-- #docplaster -->
71+
<!-- #docregion html-first-->
72+
<div class="wrapper">
73+
<h2>Hero Sign Up</h2>
74+
<form novalidate [formGroup]="form">
75+
<div class="form-group">
76+
<label>Name:</label>
77+
<input class="form-control" formControlName="name">
78+
</div>
79+
<div formGroupName="account">
80+
<div class="form-group">
81+
<label>Username:</label>
82+
<input class="form-control" formControlName="username">
83+
</div>
84+
<div class="form-group">
85+
<label>Password:</label>
86+
<input class="form-control" formControlName="password">
87+
</div>
88+
<div class="form-group">
89+
<label>Confirm Password:</label>
90+
<input class="form-control" formControlName="confirm">
91+
</div>
92+
</div>
93+
<h3>Fortress of Solitude</h3>
94+
<!-- #docregion form-group -->
95+
<!-- #docregion add-controls -->
96+
<div formGroupName="address">
97+
<div class="form-group">
98+
<label>Street:</label>
99+
<input class="form-control" formControlName="street">
100+
</div>
101+
<div class="form-group">
102+
<label>City:</label>
103+
<input class="form-control" formControlName="city">
104+
</div>
105+
<div class="form-group">
106+
<label>State:</label>
107+
<select class="form-control" formControlName="state">
108+
<option>CA</option>
109+
<option>NY</option>
110+
</select>
111+
</div>
112+
<div class="form-group">
113+
<label>Zip Code:</label>
114+
<input class="form-control" formControlName="zip">
115+
</div>
116+
</div>
117+
<!-- #enddocregion add-controls -->
118+
<!-- #enddocregion form-group -->
119+
</div>
120+
<button (click)="add()">Add Another Secret Lair</button>
121+
</div>
122+
</form>
123+
<!-- #docregion form-value-json -->
124+
<p>Form: {{ form.value | json }}</p>
125+
<!-- #enddocregion form-value-json -->
126+
<!-- #docregion inspecting -->
127+
<p>First Name FormControl value: {{ form.get('first').value}}</p>
128+
<!-- #enddocregion inspecting -->
129+
<p>Form status: {{ form.status }}</p>
130+
<!-- #docregion get-inspect -->
131+
<p>Street value: {{ form.get('address.street').value}}</p>
132+
<!-- #enddocregion get-inspect-->
133+
134+
</div>
135+
136+
<!-- #enddocregion html-first -->
137+
138+
139+
140+

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* tslint:disable:component-class-suffix */
22
// #docplaster
33
// #docregion
4+
45
import { Component } from '@angular/core';
56
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
67

@@ -9,6 +10,7 @@ import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
910
selector: 'hero-signup-1',
1011
templateUrl: './hero-signup-1.component.html'
1112
})
13+
1214
// #docregion v1
1315
export class HeroSignUpComponent1 {
1416
form = new FormGroup ({
@@ -33,7 +35,11 @@ export class HeroSignUpComponent2 {
3335
name: '',
3436
username: '',
3537
password: '',
36-
confirm: ''
38+
confirm: '',
39+
street: '',
40+
city: '',
41+
state: '',
42+
zip: ''
3743
});
3844
}
3945
}
@@ -44,24 +50,21 @@ export class HeroSignUpComponent2 {
4450
selector: 'hero-signup-3',
4551
templateUrl: './hero-signup-3.component.html'
4652
})
47-
// #enddocregion v3
53+
// #docregion v3
4854
export class HeroSignUpComponent3 {
4955
form: FormGroup;
5056
constructor(private _fb: FormBuilder) {
5157
this.form = this._fb.group({
5258
name: '',
5359
username: '',
5460
password: '',
55-
confirm: '',
56-
street: '',
57-
city: '',
58-
state: '',
59-
zip: ''
61+
confirm: ''
6062
});
6163
}
6264
}
6365
// #enddocregion v3
6466

67+
6568
@Component({
6669
moduleId: module.id,
6770
selector: 'hero-signup-4',

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// #docregion reactive-comp
44
// #docregion reactive-comp-imports
55
import { Component } from '@angular/core';
6-
import { AbstractControl, FormArray, FormGroup, FormBuilder } from '@angular/forms';
6+
import { FormArray, FormGroup, FormBuilder } from '@angular/forms';
77
// #enddocregion reactive-comp-imports
88

99
function passwordMatcher(c: AbstractControl) {

0 commit comments

Comments
 (0)