Angular 表单(二) - 模板驱动表单

import { Component, OnInit } from '@angular/core';
import { Hero} from '../hero';

@Component({
  selector: 'app-hero-form',
  templateUrl: './hero-form.component.html',
  styleUrls: ['./hero-form.component.css']
})
export class HeroFormComponent implements OnInit {

  powers = ['Really Smart', 'Super Flexible',
    'Super Hot', 'Weather Changer'];

  model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');

  submitted = false;

  onSubmit() { this.submitted = true; }

  newHero() {
    this.model = new Hero(42, '', '');
  }

}

<!-- {{diagnostic}}-->
<div class="container">
  <div [hidden]="submitted">
    <h1>Hero Form</h1>
    <!-- heroForm 变量是一个到 NgForm 指令的引用，它代表该表单的整体。
    Angular 会在 <form> 标签上自动创建并附加一个 NgForm 指令。
    NgForm 指令为 form 增补了一些额外特性。
    它会控制那些带有 ngModel 指令和 name 属性的元素，监听他们的属性（包括其有效性）。
    它还有自己的 valid 属性，这个属性只有在它包含的每个控件都有效时才是真。-->
    <form #heroForm="ngForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label for="name">Name</label>
        <!--当在表单中使用 [(ngModel)] 时，必须要定义 name 属性-->
        <input type="text" class="form-control" id="name"
               required
               [(ngModel)]="model.name" name="name"  #name="ngModel">
        <!--

　　　　　　模板引用变量可以访问模板中输入框的 Angular 控件。 这里，创建了名叫 name 的变量，并且赋值为 "ngModel"。

　　　　　　为什么是 “ngModel”？ 指令的 exportAs 属性告诉 Angular 如何链接模板引用变量到指令。 这里把 name 设置为 ngModel 是因为 ngModel指令的 exportAs 属性设置成了 “ngModel”

　　　　　　当控件是有效的 (valid) 或全新的 (pristine) 时，隐藏消息
         如果忽略了 pristine 状态，就会只在值有效时隐藏此消息。-->
        <div [hidden]="name.valid || name.pristine"
             class="alert alert-danger">
             Name is required
        </div>
      </div>

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

      <div class="form-group">
        <label for="power">Hero Power</label>
        <select class="form-control" id="power"
                required
                [(ngModel)]="model.power" name="power"
                #power="ngModel">
          <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
        </select>
        <div [hidden]="power.valid || power.pristine" class="alert alert-danger">
          Power is required
        </div>
      </div>
      <button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>
      <button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>
    </form>
  </div>

  <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-primary" (click)="submitted=false">Edit</button>
  </div>

</div>
   <!--
       每个 input 元素都有 id 属性，label 元素的 for 属性用它来匹配到对应的输入控件。
       每个 input 元素都有 name 属性，Angular 表单用它注册控件。

       NgModel 指令不仅仅跟踪状态。
       它还使用特定的 Angular CSS 类来更新控件，以反映当前状态。
       可以利用这些 CSS 类来修改控件的外观，显示或隐藏消息。
       状态        为真时的 CSS 类    为假时的 CSS 类

   控件被访问过。   ng-touched          ng-untouched
   控件的值变化了。 ng-dirty            ng-pristine 全新
   控件的值有效。   ng-valid  有效           ng-invalid
    -->

.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}