47 lines
1.5 KiB
HTML
47 lines
1.5 KiB
HTML
<!-- #docregion -->
|
|
<h2>Hero Detail</h2>
|
|
<h3><i>A FormGroup with multiple FormControls</i></h3>
|
|
<form [formGroup]="heroForm">
|
|
<div class="form-group">
|
|
<label class="center-block">Name:
|
|
<input class="form-control" formControlName="name">
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="center-block">Street:
|
|
<input class="form-control" formControlName="street">
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="center-block">City:
|
|
<input class="form-control" formControlName="city">
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<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 class="center-block">Zip Code:
|
|
<input class="form-control" formControlName="zip">
|
|
</label>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
<div class="checkbox">
|
|
<label class="center-block">
|
|
<input type="checkbox" formControlName="sidekick">I have a sidekick.
|
|
</label>
|
|
</div>
|
|
</form>
|
|
|
|
|
|
<p>Form value: {{ heroForm.value | json }}</p>
|