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

Commit bdac5ca

Browse files
kapunahelewongwardbell
kapunahelewong
authored and
wardbell
committed
docs(reactive-forms): improve example styles and explain template syn… (#3263)
improve example styles and explain template syntax change; fix one missed el in the example
1 parent 8a89a24 commit bdac5ca

File tree

7 files changed

+49
-34
lines changed

7 files changed

+49
-34
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,11 @@ <h3><i>A FormGroup with multiple FormControls</i></h3>
2929
<input class="form-control" formControlName="zip">
3030
</label>
3131
</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>
32+
<div class="form-group radio">
33+
<h4>Super power:</h4>
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">
3939
<label class="center-block">

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,11 @@ <h4>Secret Lair</h4>
3232
</div>
3333
</div>
3434
<!-- #enddocregion add-group-->
35-
<div class="form-group">
36-
<label>Super power:</label>
37-
<label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
38-
<label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
39-
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
35+
<div class="form-group radio">
36+
<h4>Super power:</h4>
37+
<label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
38+
<label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
39+
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
4040
</div>
4141
<div class="checkbox">
4242
<label class="center-block">

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,11 @@ <h3><i>PatchValue to initialize a value</i></h3>
2929
<input class="form-control" formControlName="zip">
3030
</label>
3131
</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>
32+
<div class="form-group radio">
33+
<h4>Super power:</h4>
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">
3939
<label class="center-block">

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,11 @@ <h3><i>A FormGroup with multiple FormControls</i></h3>
2929
<input class="form-control" formControlName="zip">
3030
</label>
3131
</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>
32+
<div class="form-group radio">
33+
<h4>Super power:</h4>
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">
3939
<label class="center-block">

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,11 @@ <h4>Address #{{i + 1}}</h4>
5454
</div>
5555
<!-- #enddocregion form-array-skeleton -->
5656
<!-- #enddocregion form-array-->
57-
<div class="form-group">
58-
<label>Super power:</label>
59-
<label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
60-
<label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
61-
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
57+
<div class="form-group radio">
58+
<h4>Super power:</h4>
59+
<label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
60+
<label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
61+
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
6262
</div>
6363
<div class="checkbox">
6464
<label class="center-block">

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<!-- Hero Detail Controls -->
1313
<!-- #enddocregion buttons -->
1414
<div class="form-group">
15-
<label>Name:
15+
<label class="center-block">Name:
1616
<input class="form-control" formControlName="name">
1717
</label>
1818
</div>
@@ -23,24 +23,24 @@
2323
<h4>Address #{{i + 1}}</h4>
2424
<div style="margin-left: 1em;">
2525
<div class="form-group">
26-
<label>Street:
26+
<label class="center-block">Street:
2727
<input class="form-control" formControlName="street">
2828
</label>
2929
</div>
3030
<div class="form-group">
31-
<label>City:
31+
<label class="center-block">City:
3232
<input class="form-control" formControlName="city">
3333
</label>
3434
</div>
3535
<div class="form-group">
36-
<label>State:
36+
<label class="center-block">State:
3737
<select class="form-control" formControlName="state">
3838
<option *ngFor="let state of states" [value]="state">{{state}}</option>
3939
</select>
4040
</label>
4141
</div>
4242
<div class="form-group">
43-
<label>Zip Code:
43+
<label class="center-block">Zip Code:
4444
<input class="form-control" formControlName="zip">
4545
</label>
4646
</div>
@@ -51,8 +51,8 @@ <h4>Address #{{i + 1}}</h4>
5151
<button (click)="addLair()" type="button">Add a Secret Lair</button>
5252
</div>
5353
<!-- #docregion buttons -->
54-
<div class="form-group">
55-
<label>Super power:</label>
54+
<div class="form-group radio">
55+
<h4>Super power:</h4>
5656
<label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
5757
<label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
5858
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>

‎public/docs/ts/latest/guide/reactive-forms.jade

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -181,12 +181,14 @@ a#create-component
181181
such as when specifying the `templateUrl`.
182182

183183
Next, create an exported `HeroDetailComponent` class with a `FormControl`.
184+
`FormControl` is a directive that allows you to create and manage
185+
a `FormControl` instance directly.
184186

185187

186188
+makeExample('reactive-forms/ts/src/app/hero-detail-1.component.ts', 'v1','src/app/hero-detail.component.ts (excerpt)')(format=".")
187189

188190
:marked
189-
Here you are creating a `FormControl` called `name`.
191+
Here you are creating a `FormControl` called `name`.
190192
It will be bound in the template to an HTML `input` box for the hero name.
191193

192194
A `FormControl` constructor accepts three, optional arguments:
@@ -311,9 +313,22 @@ a#formgroup
311313

312314
`formGroup` is a reactive form directive that takes an existing
313315
`FormGroup` instance and associates it with an HTML element.
314-
In this case, it will associate the `FormGroup` you saved as
316+
In this case, it associates the `FormGroup` you saved as
315317
`heroForm` with the form element.
316318

319+
Because the class now has a `FormGroup`, you must update the template
320+
syntax for associating the input with the corresponding
321+
`FormControl` in the component class.
322+
Without a parent `FormGroup`,
323+
`[formControl]="name"` worked earlier because that directive
324+
can stand alone, that is, it works without being in a `FormGroup`.
325+
With a parent `FormGroup`, the `name` input needs the syntax
326+
`formControlName=name` in order to be associated
327+
with the correct `FormControl`
328+
in the class. This syntax tells Angular to look for the parent
329+
`FormGroup`, in this case `heroForm`, and then _inside_ that group
330+
to look for a `FormControl` called `name`.
331+
317332
.l-sub-section
318333
:marked
319334
Disregard the `form-group` _CSS_ class. It belongs to the

0 commit comments

Comments
 (0)