angular2-模板驱动表单

app.module.ts 导入 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.component';

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

如果某个组件、指令或管道是属于`imports`中所导入的某个模块的，那就不能再把它再声明到本模块的`declarations`数组中。如果它是你自己写的，并且确实属于当前模块，才应该把它声明在`declarations`数组中。

container、form-group、form-control和btn类来自 Twitter Bootstrap。纯粹是装饰。我们使用 Bootstrap 来美化表单。

Angular 不需要container、form-group、form-control和btn类，或者外部库的任何样式。Angular 应用可以使用任何 CSS 库…… ，或者啥都不用

<form #heroForm="ngForm">

<div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name"> </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"> <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option> </select> </div>

NgForm:

什么是NgForm指令？但我们明明没有添加过NgForm指令啊！

Angular替你做了。Angular会在<form>标签上自动创建并附加一个NgForm指令。

NgForm指令为form增补了一些额外特性。它会控制那些带有ngModel指令和name属性的元素，监听他们的属性（包括其有效性）。它还有自己的valid属性，这个属性只有在它包含的每个控件都有效时才是真

<input>标签还添加了name属性 (attribute)，并设置为 "name"，表示英雄的名字。使用任何唯一的值都可以。

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

内部，Angular 创建了一些FormControl，并把它们注册到NgForm指令，再将该指令附加到<form>标签。注册每个FormControl时，使用name属性值作为键值

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

通过 ngModel 跟踪修改状态与有效性验证

ngModel可以获得比仅使用双向数据绑定更多的控制权。它还会告诉我们很多信息：用户碰过此控件吗？它的值变化了吗？数据变得无效了吗？

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

状态	为真时的 CSS 类	为假时的 CSS 类
控件被访问过。	`ng-touched`	`ng-untouched`
控件的值变化了。	`ng-dirty`	`ng-pristine`
控件的值有效。	`ng-valid`	`ng-invalid`

例子：往姓名<input>标签上添加名叫 spy 的临时模板引用变量，然后用这个 spy 来显示它上面的所有 CSS 类

<input type="text" class="form-control" id="name"
  required
  [(ngModel)]="model.name" name="name"
  #spy>
<br>TODO: remove this: {{spy.className}}

查看输入框，但别碰它：

点击输入框，然后点击输入框外面。：

在名字的末尾添加些斜杠。

删除名字。

(ng-valid | ng-invalid)这一对是我们最感兴趣的。当数据变得无效时，我们希望发出强力的视觉信号，还想要标记出必填字段。可以通过加入自定义 CSS 来提供视觉反馈

输入框的左侧添加带颜色的竖条，用于标记必填字段和无效输入

添加两个样式来实现这一效果

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

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

显示和隐藏验证错误信息

//template<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><button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>

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

当控件是有效的 (valid) 或全新的 (pristine) 时，隐藏消息。 “全新的”意味着从它被显示在表单中开始，用户还从未修改过它的值。

input 创建了名叫name的变量，并且赋值为 "ngModel"（指令的 exportAs 属性告诉 Angular 如何链接模板引用变量到指令。这里把name设置为ngModel是因为ngModel指令的exportAs属性设置成了 “ngModel”）

点击 New Hero 按钮，表单被清空了。输入框左侧的必填项竖条是红色的.

问题：

输入名字，再次点击 New Hero 按钮。这次，出现了错误信息！为什么？我们不希望显示新（空）的英雄时，出现错误信息。

使用浏览器工具审查这个元素就会发现，这个 name 输入框并不是全新的。表单记得我们在点击 New Hero 前输入的名字。更换了英雄并不会重置控件的“全新”状态

我们必须清除所有标记，在调用 newHero() 方法后调用表单的 reset() 方法即可 (click)="newHero(); heroForm.reset()"

提交表单

<button type="submit" class="btn btn-success" [disabled]="!heroForm.form.valid">Submit</button>

切换两个表单区域（额外的奖励）

把表单包裹进<div>中，再把它的hidden属性绑定到HeroFormComponent.submitted属性。

<div [hidden]="submitted">
  <h1>Hero Form</h1>
  <form (ngSubmit)="onSubmit()" #heroForm="ngForm">

  </form>
</div>

开始就是可见的，因为submitted属性是 false，直到提交了这个表单。

submitted = false;

onSubmit() { this.submitted = true; }

当点击 Submit 按钮时，submitted标志会变成 true，并且表单像预想中一样消失了

当表单处于已提交状态时，需要显示一些别的东西。在刚刚写的<div>包装下方，添加下列 HTML 语句：

<div [hidden]="!submitted">
  <div class="row">
    <div class="col-xs-3">Name</div>
    <div class="col-xs-9  pull-left">{{ model.name }}</div>
  </div>
  <button class="btn btn-primary" (click)="submitted=false">Edit</button>
</div>

当点Edit按钮时，这个只读块消失了，可编辑的表单重新出现了