<!-- #docplaster ... -->
<!-- #docregion -->
<div class="container">
  <!-- #docregion edit-div -->
  <div [hidden]="submitted">
    <h1>Hero Form</h1>
	  <!-- #docregion ngSubmit -->
    <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
    <!-- #enddocregion ngSubmit -->
    <!-- #enddocregion edit-div -->
      <div class="form-group">
        <label for="name">Name</label>
	      <!-- #docregion name-with-error-msg -->
        <input type="text" class="form-control" required
               [(ngModel)]="model.name"
               ngControl="name" #name="ngForm" >
        <div [hidden]="name.valid" class="alert alert-danger">
          Name is required
        </div>
	      <!-- #enddocregion name-with-error-msg -->
      </div>

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

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

	    <!-- #docregion submit-button -->
      <button type="submit" class="btn btn-default"
              [disabled]="!heroForm.form.valid">Submit</button>
	    <!-- #enddocregion submit-button -->
  <!-- #docregion edit-div -->
    </form>
  </div>
  <!-- #enddocregion edit-div -->

  <!-- #docregion submitted -->
  <div [hidden]="!submitted">
    <h2>You submitted the following:</h2>
    <div class="row">
      <div class="col-xs-3">Name</div>
      <div class="col-xs-9  pull-left">{{ model.name }}</div>
    </div>
    <div class="row">
      <div class="col-xs-3">Alter Ego</div>
      <div class="col-xs-9 pull-left">{{ model.alterEgo }}</div>
    </div>
    <div class="row">
      <div class="col-xs-3">Power</div>
      <div class="col-xs-9 pull-left">{{ model.power }}</div>
    </div>
    <br>
    <button class="btn btn-default" (click)="submitted=false">Edit</button>
  </div>
  <!-- #enddocregion submitted -->
</div>
