71 lines
2.7 KiB
HTML
71 lines
2.7 KiB
HTML
|
<!-- #docplaster-->
|
||
|
|
<h3><i>Using FormArray to add groups</i></h3>
|
||
|
|
|
||
|
|
<form [formGroup]="heroForm" novalidate>
|
||
|
|
<p>Form Changed: {{ heroForm.dirty }}</p>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="center-block">Name:
|
||
|
|
<input class="form-control" formControlName="name">
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<!-- #docregion form-array-->
|
||
|
|
<!-- #docregion form-array-skeleton -->
|
||
|
|
<div formArrayName="secretLairs" class="well well-lg">
|
||
|
|
<div *ngFor="let address of secretLairs.controls; let i=index" [formGroupName]="i" >
|
||
|
|
<!-- The repeated address template -->
|
||
|
|
<!-- #enddocregion form-array-skeleton -->
|
||
|
|
<h4>Address #{{i + 1}}</h4>
|
||
|
|
<div style="margin-left: 1em;">
|
||
|
|
<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>
|
||
|
|
<br>
|
||
|
|
<!-- End of the repeated address template -->
|
||
|
|
<!-- #docregion form-array-skeleton -->
|
||
|
|
</div>
|
||
|
|
<!-- #enddocregion form-array-skeleton -->
|
||
|
|
<!-- #enddocregion form-array-->
|
||
|
|
<!-- #docregion add-lair -->
|
||
|
|
<button (click)="addLair()" type="button">Add a Secret Lair</button>
|
||
|
|
<!-- #enddocregion add-lair -->
|
||
|
|
<!-- #docregion form-array-->
|
||
|
|
<!-- #docregion form-array-skeleton -->
|
||
|
|
</div>
|
||
|
|
<!-- #enddocregion form-array-skeleton -->
|
||
|
|
<!-- #enddocregion form-array-->
|
||
|
|
<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>heroForm value: {{ heroForm.value | json}}</p>
|