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
This commit is contained in:
Kapunahele Wong 2017-02-17 13:46:42 -05:00 committed by Ward Bell
parent 8a89a2436f
commit bdac5ca6b0
7 changed files with 49 additions and 34 deletions

View File

@ -29,8 +29,8 @@
<input class="form-control" formControlName="zip">
</label>
</div>
<div class="form-group">
<label>Super power:</label>
<div class="form-group radio">
<h4>Super power:</h4>
<label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
<label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>

View File

@ -32,8 +32,8 @@
</div>
</div>
<!-- #enddocregion add-group-->
<div class="form-group">
<label>Super power:</label>
<div class="form-group radio">
<h4>Super power:</h4>
<label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
<label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>

View File

@ -29,8 +29,8 @@
<input class="form-control" formControlName="zip">
</label>
</div>
<div class="form-group">
<label>Super power:</label>
<div class="form-group radio">
<h4>Super power:</h4>
<label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
<label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>

View File

@ -29,8 +29,8 @@
<input class="form-control" formControlName="zip">
</label>
</div>
<div class="form-group">
<label>Super power:</label>
<div class="form-group radio">
<h4>Super power:</h4>
<label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
<label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>

View File

@ -54,8 +54,8 @@
</div>
<!-- #enddocregion form-array-skeleton -->
<!-- #enddocregion form-array-->
<div class="form-group">
<label>Super power:</label>
<div class="form-group radio">
<h4>Super power:</h4>
<label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
<label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>

View File

@ -12,7 +12,7 @@
<!-- Hero Detail Controls -->
<!-- #enddocregion buttons -->
<div class="form-group">
<label>Name:
<label class="center-block">Name:
<input class="form-control" formControlName="name">
</label>
</div>
@ -23,24 +23,24 @@
<h4>Address #{{i + 1}}</h4>
<div style="margin-left: 1em;">
<div class="form-group">
<label>Street:
<label class="center-block">Street:
<input class="form-control" formControlName="street">
</label>
</div>
<div class="form-group">
<label>City:
<label class="center-block">City:
<input class="form-control" formControlName="city">
</label>
</div>
<div class="form-group">
<label>State:
<label class="center-block">State:
<select class="form-control" formControlName="state">
<option *ngFor="let state of states" [value]="state">{{state}}</option>
</select>
</label>
</div>
<div class="form-group">
<label>Zip Code:
<label class="center-block">Zip Code:
<input class="form-control" formControlName="zip">
</label>
</div>
@ -51,8 +51,8 @@
<button (click)="addLair()" type="button">Add a Secret Lair</button>
</div>
<!-- #docregion buttons -->
<div class="form-group">
<label>Super power:</label>
<div class="form-group radio">
<h4>Super power:</h4>
<label class="center-block"><input type="radio" formControlName="power" value="flight">Flight</label>
<label class="center-block"><input type="radio" formControlName="power" value="x-ray vision">X-ray vision</label>
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>

View File

@ -181,6 +181,8 @@ a#create-component
such as when specifying the `templateUrl`.
Next, create an exported `HeroDetailComponent` class with a `FormControl`.
`FormControl` is a directive that allows you to create and manage
a `FormControl` instance directly.
+makeExample('reactive-forms/ts/src/app/hero-detail-1.component.ts', 'v1','src/app/hero-detail.component.ts (excerpt)')(format=".")
@ -311,9 +313,22 @@ a#formgroup
`formGroup` is a reactive form directive that takes an existing
`FormGroup` instance and associates it with an HTML element.
In this case, it will associate the `FormGroup` you saved as
In this case, it associates the `FormGroup` you saved as
`heroForm` with the form element.
Because the class now has a `FormGroup`, you must update the template
syntax for associating the input with the corresponding
`FormControl` in the component class.
Without a parent `FormGroup`,
`[formControl]="name"` worked earlier because that directive
can stand alone, that is, it works without being in a `FormGroup`.
With a parent `FormGroup`, the `name` input needs the syntax
`formControlName=name` in order to be associated
with the correct `FormControl`
in the class. This syntax tells Angular to look for the parent
`FormGroup`, in this case `heroForm`, and then _inside_ that group
to look for a `FormControl` called `name`.
.l-sub-section
:marked
Disregard the `form-group` _CSS_ class. It belongs to the