表单

表单是商业应用的支柱，用来数据录入任务

如何编写表单

第一步：导入FormsModule

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent }  from './app.component';
import { HeroFormComponent } from './hero-form/hero-form.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule <--
  ],
  declarations: [
    AppComponent,
    HeroFormComponent
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

第二步：创建初始HTML表单模板

<div class="container">
    <h1>Hero Form</h1>
    <form #heroForm="ngForm">  <-- heroForm变量是一个到NgForm指令的引用，它代表该表单的整体
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" required> <--
      </div>

      <div class="form-group">
        <label for="alterEgo">Alter Ego</label>
        <input type="text" class="form-control" id="alterEgo"> <--
      </div>
      <button type="submit" class="btn btn-success">Submit</button> <--
    </form>
</div>

NgForm指令

什么是NgForm指令？但你明明没有添加过NgForm指令啊! Angular 替你做了。Angular会在<form> 标签上自动创建并附加一个NgForm指令。 NgForm指令为form增补了一些额外特性。它会控制那些带有ngModel指令和name属性的元素，监听它们的属性。它还有自己的valid属性，这个属性只有在它包含的每个空间都有效时才是真

在表单中使用[(ngModel)]时，必须要定义name属性

双向数据绑定

<input type="text" class="form-control" id="name"
       required <-- 必须要填写
       [(ngModel)]="model.name" name="name">  <-- 双向数据绑定

变更检测

通过ngModel跟踪修改状态与有效性验证 NgModel指令不仅仅跟踪状态，它还使用特定的Angular CSS类来更新控件，以反映当前状态，可以利用这些css类修改控件的外观，显示或隐藏消息

<label for="name">Name</label>
<input type="text" class="form-control" id="name"
       required
       [(ngModel)]="model.name" name="name"
       #name="ngModel">
<div [hidden]="name.valid || name.pristine"
     class="alert alert-danger">
  Name is required
</div>

reset方法

调用表单的reset方法可以清楚所有标记(例如：ng-touched ng-dirty之类的标记)

<button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button>

submit 提交表单

<form (ngSubmit)="onSubmit()" #heroForm="ngForm">
<button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>