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

Commit a0ab7bf

Browse files
kapunahelewongkapunahelewong
committed
updating names
added screenshots Add FormArray section copy edits
1 parent fe97610 commit a0ab7bf

15 files changed

+537
-174
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
<!-- #docplaster -->
2+
<!-- #docregion app-component-html -->
13
<div class="container">
24
<reactive-form></reactive-form>
35
</div>
6+
<!-- #enddocregion app-component-html -->

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
// #docplaster
2+
// #docregion
3+
// #docregion app-comp-ts
14
import { Component } from '@angular/core';
25

36
@Component({
@@ -7,3 +10,5 @@ import { Component } from '@angular/core';
710
})
811
export class AppComponent { }
912

13+
// #enddocregion app-comp-ts
14+
// #enddocregion

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
// #docplaster
22
// #docregion
3-
// #docregion add-reactive-forms-module
3+
// #docregion app-module
4+
// #docregion reactive-imports
45
import { NgModule } from '@angular/core';
56
import { BrowserModule } from '@angular/platform-browser';
6-
77
import { ReactiveFormsModule } from '@angular/forms'; // <-- #1 import the module
8-
98
import { AppComponent } from './app.component';
10-
// #enddocregion add-reactive-forms-module
119
import { ReactiveFormComponent } from './reactive-form.component';
10+
// #enddocregion reactive-imports
1211

1312
// #docregion add-reactive-forms-module
1413
@NgModule({
@@ -19,11 +18,13 @@ import { ReactiveFormComponent } from './reactive-form.component';
1918
declarations: [
2019
AppComponent,
2120
// #enddocregion add-reactive-forms-module
22-
ReactiveFormComponent // <-- #3 declare the reactive forms component
21+
ReactiveFormComponent // <-- psst...while you're in here, declare the ReactiveFormComponent
2322
// #docregion add-reactive-forms-module
2423
],
2524
bootstrap: [ AppComponent ]
2625
})
2726
export class AppModule { }
2827
// #enddocregion add-reactive-forms-module
28+
// #enddocregion app-module
29+
2930
// #docregion

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

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

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

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
// #docplaster
2+
// #docregion
3+
// #docregion reactive-comp-v1
4+
// #docregion reactive-comp-imports-v1
5+
import { Component } from '@angular/core';
6+
import { AbstractControl, FormControl, FormGroup} from '@angular/forms';
7+
// #enddocregion reactive-comp-imports-v1
8+
9+
// #docregion reactive-comp-imports-addon
10+
import { AbstractControl, FormControl, FormGroup, FormBuilder} from '@angular/forms';
11+
// #enddocregion reactive-comp-imports-addon
12+
13+
// #docregion reactive-comp-metadata-v1
14+
@Component({
15+
moduleId: module.id,
16+
selector: 'reactive-form',
17+
templateUrl: './reactive-forms.component.html'
18+
})
19+
// #enddocregion reactive-comp-metadata-v1
20+
21+
// #docregion reactive-comp-class-v1
22+
export class ReactiveFormComponent {
23+
form = new FormGroup ({
24+
name: new FormControl(),
25+
username: new FormControl(),
26+
password: new FormControl(),
27+
confirm: new FormControl()
28+
});
29+
}
30+
// #enddocregion reactive-comp-class-v1
31+
// #enddocregion reactive-comp-v1
32+
33+
// #docregion class-refactor
34+
export class ReactiveFormComponent {
35+
form: FormGroup;
36+
constructor(private _fb: FormBuilder) {
37+
this.form = this._fb.group({
38+
name: '',
39+
username: '',
40+
password: '',
41+
confirm: ''
42+
});
43+
}
44+
}
45+
46+
// #enddocregion class-refactor
47+
48+
// #docregion add-form-controls
49+
export class ReactiveFormComponent {
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+
65+
// #enddocregion add-form-controls
66+
67+
// #docregion add-group
68+
constructor(private _fb: FormBuilder) {
69+
this.form = this._fb.group({
70+
name: '',
71+
username: '',
72+
password: '',
73+
confirm: '',
74+
address: this._fb.group({
75+
street: '',
76+
city: '',
77+
state: '',
78+
zip: ''
79+
})
80+
});
81+
}
82+
// #enddocregion add-group
83+
// #docregion
84+
85+
// #docregion patch-value
86+
constructor(private _fb: FormBuilder) {
87+
this.form = this._fb.group({
88+
name: '',
89+
username: '',
90+
password: '',
91+
confirm: '',
92+
address: this._fb.group({
93+
street: '',
94+
city: '',
95+
state: '',
96+
zip: ''
97+
})
98+
});
99+
this.form.patchValue({
100+
name: 'Nancy'
101+
});
102+
}
103+
// #enddocregion patch-value
104+
105+
//#docregion set-value
106+
this.form.setValue({
107+
name: 'Nancy',
108+
username: 'NancyD',
109+
password: '',
110+
confirm: '',
111+
address: {
112+
street: '123 Fake Street',
113+
city: 'San Francisco',
114+
state: 'CA',
115+
zip:'12345'
116+
});
117+
// #enddocregion set-value
118+

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!-- #docplaster -->
2+
<!-- #docregion html-final -->
3+
<div class="wrapper">
4+
<h2>Hero Sign Up</h2>
5+
<form novalidate [formGroup]="form">
6+
<div class="form-group">
7+
<label>Name:</label>
8+
<input class="form-control" formControlName="name">
9+
</div>
10+
<div formGroupName="account">
11+
<div class="form-group">
12+
<label>Username:</label>
13+
<input class="form-control" formControlName="username">
14+
</div>
15+
<div class="form-group">
16+
<label>Password:</label>
17+
<input class="form-control" formControlName="password">
18+
</div>
19+
<div class="form-group">
20+
<label>Confirm Password:</label>
21+
<input class="form-control" formControlName="confirm">
22+
</div>
23+
</div>
24+
<!-- #docregion array-group -->
25+
<div formArrayName="addresses" class="addresses">
26+
<div *ngFor="let address of addresses.controls; let i=index" [formGroupName]="i">
27+
<h3>Fortress of Solitude</h3>
28+
<!-- #docregion grouping -->
29+
<div class="form-group">
30+
<label>Street:</label>
31+
<input class="form-control" formControlName="street">
32+
</div>
33+
<div class="form-group">
34+
<label>City:</label>
35+
<input class="form-control" formControlName="city">
36+
</div>
37+
<div class="form-group">
38+
<label>State:</label>
39+
<select class="form-control" formControlName="state">
40+
<option>CA</option>
41+
<option>NY</option>
42+
</select>
43+
</div>
44+
<div class="form-group">
45+
<label>Zip Code:</label>
46+
<input class="form-control" formControlName="zip">
47+
</div>
48+
<!-- #enddocregion grouping -->
49+
</div>
50+
<button (click)="add()">Add Another Secret Lair</button>
51+
</div>
52+
<!-- #enddocregion array-group -->
53+
</form>
54+
<!-- #docregion form-value-json -->
55+
<p>Form: {{ form.value | json }}</p>
56+
<!-- #enddocregion form-value-json -->
57+
</div>
58+
59+
<!-- #enddocregion html-final -->

0 commit comments

Comments
 (0)