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

Commit c0e81e9

Browse files
kapunahelewongkapunahelewong
committed
docs(reactive-forms): add Ward's comments
1 parent 3393565 commit c0e81e9

16 files changed

+191
-63
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- #docregion simple-control-->
22
<h2>Hero Detail</h2>
33
<h3><i>Just a FormControl</i></h3>
4-
<label>Name:
4+
<label class="center-block">Name:
55
<input class="form-control" [formControl]="name">
66
</label>
77
<!-- #enddocregion simple-control-->

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* tslint:disable:component-class-suffix */
22
// #docregion imports
33
import { Component } from '@angular/core';
4-
import { FormControl } from '@angular/forms';
4+
import { FormControl } from '@angular/forms';
55
// #enddocregion
66

77
@Component({

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ <h2>Hero Detail</h2>
33
<h3><i>FormControl in a FormGroup</i></h3>
44
<form [formGroup]="heroForm" novalidate>
55
<div class="form-group">
6-
<label>Name:
6+
<label class="center-block">Name:
77
<input class="form-control" formControlName="name">
88
</label>
99
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ <h2>Hero Detail</h2>
33
<h3><i>A FormGroup with a single FormControl using FormBuilder</i></h3>
44
<form [formGroup]="heroForm" novalidate>
55
<div class="form-group">
6-
<label>Name:
6+
<label class="center-block">Name:
77
<input class="form-control" formControlName="name">
88
</label>
99
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* tslint:disable:component-class-suffix */
22
// #docregion imports
3-
import { Component } from '@angular/core';
3+
import { Component } from '@angular/core';
44
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
55
// #enddocregion imports
66

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,40 @@ <h2>Hero Detail</h2>
33
<h3><i>A FormGroup with multiple FormControls</i></h3>
44
<form [formGroup]="heroForm" novalidate>
55
<div class="form-group">
6-
<label>Name:
6+
<label class="center-block">Name:
77
<input class="form-control" formControlName="name">
88
</label>
99
</div>
1010
<div class="form-group">
11-
<label>Street:
11+
<label class="center-block">Street:
1212
<input class="form-control" formControlName="street">
1313
</label>
1414
</div>
1515
<div class="form-group">
16-
<label>City:
16+
<label class="center-block">City:
1717
<input class="form-control" formControlName="city">
1818
</label>
1919
</div>
2020
<div class="form-group">
21-
<label>State:
21+
<label class="center-block">State:
2222
<select class="form-control" formControlName="state">
2323
<option *ngFor="let state of states">{{state}}</option>
2424
</select>
2525
</label>
2626
</div>
2727
<div class="form-group">
28-
<label>Zip Code:
28+
<label class="center-block">Zip Code:
2929
<input class="form-control" formControlName="zip">
3030
</label>
3131
</div>
3232
<div class="form-group">
3333
<label>Super power:</label>
34-
<label><input type="radio" formControlName="power" value="flight">Flight</label>
35-
<label><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
36-
<label><input type="radio" formControlName="power" value="strength">Strength</label>
34+
<label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
35+
<label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
36+
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
3737
</div>
3838
<div class="checkbox">
39-
<label>
39+
<label class="center-block">
4040
<input type="checkbox" formControlName="sidekick">I have a sidekick.
4141
</label>
4242
</div>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* tslint:disable:component-class-suffix */
22
// #docregion imports
3-
import { Component } from '@angular/core';
4-
import { FormBuilder, FormGroup } from '@angular/forms';
3+
import { Component } from '@angular/core';
4+
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
55

66
import { states } from './data-model';
77
// #enddocregion imports
@@ -22,7 +22,7 @@ export class HeroDetailComponent4 {
2222

2323
createForm() {
2424
this.heroForm = this.fb.group({
25-
name: '',
25+
name: ['', Validators.required ],
2626
street: '',
2727
city: '',
2828
state: '',

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

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,47 @@
11
<form [formGroup]="heroForm" novalidate>
22
<div class="form-group">
3-
<label>Name:</label>
4-
<input class="form-control" formControlName="name">
3+
<label class="center-block">Name:
4+
<input class="form-control" formControlName="name">
5+
</label>
56
</div>
67
<!-- #docregion add-group-->
78
<div formGroupName="address" class="well well-lg">
89
<h4>Secret Lair</h4>
910
<div class="form-group">
10-
<label>Street:</label>
11-
<input class="form-control" formControlName="street">
11+
<label class="center-block">Street:
12+
<input class="form-control" formControlName="street">
13+
</label>
1214
</div>
1315
<div class="form-group">
14-
<label>City:</label>
15-
<input class="form-control" formControlName="city">
16+
<label class="center-block">City:
17+
<input class="form-control" formControlName="city">
18+
</label>
1619
</div>
1720
<div class="form-group">
18-
<label>State:</label>
19-
<select class="form-control" formControlName="state">
20-
<option *ngFor="let state of states">{{state}}</option>
21-
</select>
21+
<label class="center-block">State:
22+
<select class="form-control" formControlName="state">
23+
<option *ngFor="let state of states">{{state}}</option>
24+
</select>
25+
</label>
2226
</div>
2327
<div class="form-group">
24-
<label>Zip Code:</label>
25-
<input class="form-control" formControlName="zip">
28+
<label class="center-block">Zip Code:
29+
<input class="form-control" formControlName="zip">
30+
</label>
2631
</div>
2732
</div>
2833
<!-- #enddocregion add-group-->
34+
<div class="form-group">
35+
<label>Super power:</label>
36+
<label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
37+
<label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
38+
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
39+
</div>
40+
<div class="checkbox">
41+
<label class="center-block">
42+
<input type="checkbox" formControlName="sidekick">I have a sidekick.
43+
</label>
44+
</div>
2945
</form>
3046

3147
<p>heroForm value: {{ heroForm.value | json}}</p>

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* tslint:disable:component-class-suffix */
2-
import { Component } from '@angular/core';
3-
import { FormBuilder, FormGroup } from '@angular/forms';
2+
import { Component } from '@angular/core';
3+
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
44

55
import { states } from './data-model';
66

@@ -20,13 +20,15 @@ export class HeroDetailComponent5 {
2020

2121
createForm() {
2222
this.heroForm = this.fb.group({ // <-- the parent FormGroup
23-
name: '',
23+
name: ['', Validators.required ],
2424
address: this.fb.group({ // <-- the child FormGroup
2525
street: '',
2626
city: '',
2727
state: '',
2828
zip: ''
29-
})
29+
}),
30+
power: '',
31+
sidekick: ''
3032
});
3133
}
3234
}

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!-- #docregion -->
2+
<h2>Hero Detail</h2>
3+
<h3><i>A FormGroup with multiple FormControls</i></h3>
4+
<form [formGroup]="heroForm" novalidate>
5+
<div class="form-group">
6+
<label class="center-block">Name:
7+
<input class="form-control" formControlName="name">
8+
</label>
9+
</div>
10+
<div class="form-group">
11+
<label class="center-block">Street:
12+
<input class="form-control" formControlName="street">
13+
</label>
14+
</div>
15+
<div class="form-group">
16+
<label class="center-block">City:
17+
<input class="form-control" formControlName="city">
18+
</label>
19+
</div>
20+
<div class="form-group">
21+
<label class="center-block">State:
22+
<select class="form-control" formControlName="state">
23+
<option *ngFor="let state of states">{{state}}</option>
24+
</select>
25+
</label>
26+
</div>
27+
<div class="form-group">
28+
<label class="center-block">Zip Code:
29+
<input class="form-control" formControlName="zip">
30+
</label>
31+
</div>
32+
<div class="form-group">
33+
<label>Super power:</label>
34+
<label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
35+
<label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
36+
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
37+
</div>
38+
<div class="checkbox">
39+
<label class="center-block">
40+
<input type="checkbox" formControlName="sidekick">I have a sidekick.
41+
</label>
42+
</div>
43+
</form>
44+
45+
46+
<p>Form value: {{ heroForm.value | json }}</p>

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/* tslint:disable:component-class-suffix */
22
// #docregion import-input
3-
import { Component, Input, OnChanges } from '@angular/core';
3+
import { Component, Input, OnChanges } from '@angular/core';
44
// #enddocregion import-input
5-
import { FormBuilder, FormGroup } from '@angular/forms';
5+
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
66

77
// #docregion import-hero
88
import { Hero, states } from './data-model';
@@ -31,13 +31,15 @@ export class HeroDetailComponent6 implements OnChanges {
3131
createForm() {
3232
// #docregion hero-form-model
3333
this.heroForm = this.fb.group({
34-
name: '',
34+
name: ['', Validators.required ],
3535
address: this.fb.group({
3636
street: '',
3737
city: '',
3838
state: '',
3939
zip: ''
40-
})
40+
}),
41+
power: '',
42+
sidekick: ''
4143
});
4244
// #enddocregion hero-form-model
4345
}

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!-- #docregion -->
2+
<h2>Hero Detail</h2>
3+
<h3><i>A FormGroup with multiple FormControls</i></h3>
4+
<form [formGroup]="heroForm" novalidate>
5+
<div class="form-group">
6+
<label class="center-block">Name:
7+
<input class="form-control" formControlName="name">
8+
</label>
9+
</div>
10+
<div class="form-group">
11+
<label class="center-block">Street:
12+
<input class="form-control" formControlName="street">
13+
</label>
14+
</div>
15+
<div class="form-group">
16+
<label class="center-block">City:
17+
<input class="form-control" formControlName="city">
18+
</label>
19+
</div>
20+
<div class="form-group">
21+
<label class="center-block">State:
22+
<select class="form-control" formControlName="state">
23+
<option *ngFor="let state of states">{{state}}</option>
24+
</select>
25+
</label>
26+
</div>
27+
<div class="form-group">
28+
<label class="center-block">Zip Code:
29+
<input class="form-control" formControlName="zip">
30+
</label>
31+
</div>
32+
<div class="form-group">
33+
<label>Super power:</label>
34+
<label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
35+
<label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
36+
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
37+
</div>
38+
<div class="checkbox">
39+
<label class="center-block">
40+
<input type="checkbox" formControlName="sidekick">I have a sidekick.
41+
</label>
42+
</div>
43+
</form>
44+
45+
46+
<p>Form value: {{ heroForm.value | json }}</p>

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/* tslint:disable:component-class-suffix */
22
// #docplaster
33
// #docregion imports
4-
import { Component, Input, OnChanges } from '@angular/core';
5-
import { FormBuilder, FormGroup } from '@angular/forms';
4+
import { Component, Input, OnChanges } from '@angular/core';
5+
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
66

77
import { Address, Hero, states } from './data-model';
88
// #enddocregion imports
@@ -26,8 +26,10 @@ export class HeroDetailComponent7 implements OnChanges {
2626
createForm() {
2727
// #docregion address-form-group
2828
this.heroForm = this.fb.group({
29-
name: '',
30-
address: this.fb.group(new Address()) // <-- a FormGroup with a new address
29+
name: ['', Validators.required ],
30+
address: this.fb.group(new Address()), // <-- a FormGroup with a new address
31+
power: '',
32+
sidekick: ''
3133
});
3234
// #enddocregion address-form-group
3335
}

0 commit comments

Comments
 (0)