<!-- #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>
