angular-docs-cn/public/docs/_examples/forms/js/app/hero-form.component.html

<!-- #docplaster -->
<!-- #docregion final -->
<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" #power="ngForm" >
         <option *ngFor="let p of powers" [value]="p">{{p}}</option>
       </select>
       <div [hidden]="power.valid" class="alert alert-danger">
         Power is required
       </div>
     </div>

  <!-- #docregion submit-button -->
     <button type="submit" class="btn btn-default"
             [disabled]="!heroForm.form.valid">Submit</button>
 <!-- #enddocregion submit-button -->
   </form>
 </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>
<!-- #enddocregion final -->

<!-- ====================================================  -->
 <div>
   <form>
<!-- #docregion edit-div -->

      <!-- ... all of the form ... -->

   </form>
 </div>
<!-- #enddocregion edit-div -->

<!-- ====================================================  -->
<hr>
<style>
 .no-style .ng-valid {
 border-left: 1px  solid #CCC
}

 .no-style .ng-invalid {
 border-left: 1px  solid #CCC
}
</style>
<div class="no-style" style="margin-left: 4px">
  <!-- #docregion start -->
 <div class="container">
     <h1>Hero Form</h1>
     <form>
       <div class="form-group">
         <label for="name">Name</label>
         <input type="text" class="form-control" required>
       </div>

       <div class="form-group">
         <label for="alterEgo">Alter Ego</label>
         <input type="text" class="form-control">
       </div>

   <!-- #enddocregion start -->
       <!-- #docregion powers -->
       <div class="form-group">
         <label for="power">Hero Power</label>
         <select class="form-control" required>
           <option *ngFor="let p of powers" [value]="p">{{p}}</option>
         </select>
       </div>

       <!-- #enddocregion powers -->
   <!-- #docregion start -->
       <button type="submit" class="btn btn-default">Submit</button>
     </form>
 </div>
   <!-- #enddocregion start -->
 <!-- #enddocregion  phase1-->

 <!-- ====================================================  -->
 <hr>
 <!-- #docregion phase2-->
 <div class="container">
     <h1>Hero Form</h1>
     <form>
   <!-- #docregion ngModel-2-->
       {{diagnostic()}}
       <div class="form-group">
         <label for="name">Name</label>
         <input type="text" class="form-control" required
           [(ngModel)]="model.name" >
       </div>

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

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

   <!-- #enddocregion ngModel-2-->
       <button type="submit" class="btn btn-default">Submit</button>

     </form>
 </div>
 <!-- #enddocregion  phase2-->

 <!-- EXTRA MATERIAL FOR DOCUMENTATION -->
 <hr>
 <!-- #docregion ngModel-1-->
   <input type="text"  class="form-control" required
     [(ngModel)]="model.name" >
     TODO: remove this: {{model.name}}
 <!-- #enddocregion ngModel-1-->
 <hr>
 <!-- #docregion ngModel-3-->
   <input type="text" class="form-control" required
     [ngModel]="model.name"
     (ngModelChange)="model.name = $event" >
     TODO: remove this: {{model.name}}
 <!-- #enddocregion ngModel-3-->
 <hr>
 <form>
 <!-- #docregion ngControl-1 -->
      <input type="text" class="form-control" required
        [(ngModel)]="model.name"
        ngControl="name" >
 <!-- #enddocregion ngControl-1 -->
 <hr>
 <!-- #docregion ngControl-2 -->
      <input type="text" class="form-control" required
        [(ngModel)]="model.name"
        ngControl="name"  #spy >
      <br>TODO: remove this: {{spy.className}}
 <!-- #enddocregion ngControl-2 -->
 </form>

 <div>
 <hr>
 Name via form.controls = {{showFormControls(heroForm)}}
 </div>

</div>