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:
parent
8a89a2436f
commit
bdac5ca6b0
|
@ -29,11 +29,11 @@
|
||||||
<input class="form-control" formControlName="zip">
|
<input class="form-control" formControlName="zip">
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group radio">
|
||||||
<label>Super power:</label>
|
<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="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="x-ray vision">X-ray vision</label>
|
||||||
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
|
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="checkbox">
|
<div class="checkbox">
|
||||||
<label class="center-block">
|
<label class="center-block">
|
||||||
|
|
|
@ -32,11 +32,11 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- #enddocregion add-group-->
|
<!-- #enddocregion add-group-->
|
||||||
<div class="form-group">
|
<div class="form-group radio">
|
||||||
<label>Super power:</label>
|
<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="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="x-ray vision">X-ray vision</label>
|
||||||
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
|
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="checkbox">
|
<div class="checkbox">
|
||||||
<label class="center-block">
|
<label class="center-block">
|
||||||
|
|
|
@ -29,11 +29,11 @@
|
||||||
<input class="form-control" formControlName="zip">
|
<input class="form-control" formControlName="zip">
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group radio">
|
||||||
<label>Super power:</label>
|
<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="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="x-ray vision">X-ray vision</label>
|
||||||
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
|
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="checkbox">
|
<div class="checkbox">
|
||||||
<label class="center-block">
|
<label class="center-block">
|
||||||
|
|
|
@ -29,11 +29,11 @@
|
||||||
<input class="form-control" formControlName="zip">
|
<input class="form-control" formControlName="zip">
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group radio">
|
||||||
<label>Super power:</label>
|
<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="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="x-ray vision">X-ray vision</label>
|
||||||
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
|
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="checkbox">
|
<div class="checkbox">
|
||||||
<label class="center-block">
|
<label class="center-block">
|
||||||
|
|
|
@ -54,11 +54,11 @@
|
||||||
</div>
|
</div>
|
||||||
<!-- #enddocregion form-array-skeleton -->
|
<!-- #enddocregion form-array-skeleton -->
|
||||||
<!-- #enddocregion form-array-->
|
<!-- #enddocregion form-array-->
|
||||||
<div class="form-group">
|
<div class="form-group radio">
|
||||||
<label>Super power:</label>
|
<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="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="x-ray vision">X-ray vision</label>
|
||||||
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
|
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="checkbox">
|
<div class="checkbox">
|
||||||
<label class="center-block">
|
<label class="center-block">
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
<!-- Hero Detail Controls -->
|
<!-- Hero Detail Controls -->
|
||||||
<!-- #enddocregion buttons -->
|
<!-- #enddocregion buttons -->
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Name:
|
<label class="center-block">Name:
|
||||||
<input class="form-control" formControlName="name">
|
<input class="form-control" formControlName="name">
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
@ -23,24 +23,24 @@
|
||||||
<h4>Address #{{i + 1}}</h4>
|
<h4>Address #{{i + 1}}</h4>
|
||||||
<div style="margin-left: 1em;">
|
<div style="margin-left: 1em;">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Street:
|
<label class="center-block">Street:
|
||||||
<input class="form-control" formControlName="street">
|
<input class="form-control" formControlName="street">
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>City:
|
<label class="center-block">City:
|
||||||
<input class="form-control" formControlName="city">
|
<input class="form-control" formControlName="city">
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>State:
|
<label class="center-block">State:
|
||||||
<select class="form-control" formControlName="state">
|
<select class="form-control" formControlName="state">
|
||||||
<option *ngFor="let state of states" [value]="state">{{state}}</option>
|
<option *ngFor="let state of states" [value]="state">{{state}}</option>
|
||||||
</select>
|
</select>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>Zip Code:
|
<label class="center-block">Zip Code:
|
||||||
<input class="form-control" formControlName="zip">
|
<input class="form-control" formControlName="zip">
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
@ -51,8 +51,8 @@
|
||||||
<button (click)="addLair()" type="button">Add a Secret Lair</button>
|
<button (click)="addLair()" type="button">Add a Secret Lair</button>
|
||||||
</div>
|
</div>
|
||||||
<!-- #docregion buttons -->
|
<!-- #docregion buttons -->
|
||||||
<div class="form-group">
|
<div class="form-group radio">
|
||||||
<label>Super power:</label>
|
<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="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="x-ray vision">X-ray vision</label>
|
||||||
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
|
<label class="center-block"><input type="radio" formControlName="power" value="strength">Strength</label>
|
||||||
|
|
|
@ -181,12 +181,14 @@ a#create-component
|
||||||
such as when specifying the `templateUrl`.
|
such as when specifying the `templateUrl`.
|
||||||
|
|
||||||
Next, create an exported `HeroDetailComponent` class with a `FormControl`.
|
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=".")
|
+makeExample('reactive-forms/ts/src/app/hero-detail-1.component.ts', 'v1','src/app/hero-detail.component.ts (excerpt)')(format=".")
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Here you are creating a `FormControl` called `name`.
|
Here you are creating a `FormControl` called `name`.
|
||||||
It will be bound in the template to an HTML `input` box for the hero name.
|
It will be bound in the template to an HTML `input` box for the hero name.
|
||||||
|
|
||||||
A `FormControl` constructor accepts three, optional arguments:
|
A `FormControl` constructor accepts three, optional arguments:
|
||||||
|
@ -311,9 +313,22 @@ a#formgroup
|
||||||
|
|
||||||
`formGroup` is a reactive form directive that takes an existing
|
`formGroup` is a reactive form directive that takes an existing
|
||||||
`FormGroup` instance and associates it with an HTML element.
|
`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.
|
`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
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Disregard the `form-group` _CSS_ class. It belongs to the
|
Disregard the `form-group` _CSS_ class. It belongs to the
|
||||||
|
|
Loading…
Reference in New Issue