 <!-- #docregion -->
<div class="container">
  <div [hidden]="submitted">
    <h1>Hero Form 2 (Template & Messages)</h1>
    <!-- #docregion form-tag-->
    <form #heroForm="ngForm"  *ngIf="active"  (ngSubmit)="onSubmit()">
    <!-- #enddocregion form-tag-->
      <div class="form-group">
        <!-- #docregion name-with-error-msg -->
        <label for="name">Name</label>

        <!-- #docregion name-input -->
        <input type="text" id="name" class="form-control"
               required minlength="4" maxlength="24" forbiddenName="bob"
               name="name" [(ngModel)]="hero.name" >
        <!-- #enddocregion name-input -->

        <div *ngIf="formErrors.name" class="alert alert-danger">
          {{ formErrors.name }}
        </div>
        <!-- #enddocregion name-with-error-msg -->
      </div>

      <div class="form-group">
        <label for="alterEgo">Alter Ego</label>
        <input type="text" id="alterEgo" class="form-control"
               name="alterEgo"
               [(ngModel)]="hero.alterEgo" >
      </div>

      <div class="form-group">
        <label for="power">Hero Power</label>
        <select id="power" class="form-control"
                name="power"
                [(ngModel)]="hero.power" required >
          <option *ngFor="let p of powers" [value]="p">{{p}}</option>
        </select>

        <div *ngIf="formErrors.power" class="alert alert-danger">
          {{ formErrors.power }}
        </div>
      </div>

      <button type="submit" class="btn btn-default"
             [disabled]="!heroForm.form.valid">Submit</button>
      <button type="button" class="btn btn-default"
             (click)="addHero()">New Hero</button>
    </form>
  </div>

  <hero-submitted [hero]="hero" [(submitted)]="submitted"></hero-submitted>
</div>
