angular学习之路13-模板驱动表单-英雄职业

1修改 app.module.ts

app.module.ts 定义了应用的根模块。其中标识即将用到的外部模块，以及声明属于本模块中的组件，例如 HeroFormComponent。

因为模板驱动的表单位于它们自己的模块，所以在使用表单之前，需要将 FormsModule 添加到应用模块的 imports 数组中。

对它做如下修改：

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: [ // 此处引入其他module的相关组件。在angular中，当前应用就是一个module
    BrowserModule,
    FormsModule
  ],
  declarations: [//此处声明自己模块中的自定义组件
    AppComponent,
    HeroFormComponent
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

有两处更改

1. 导入 FormsModule。

2. 把 FormsModule 添加到 ngModule 装饰器的 imports 列表中，这样应用就能访问模板驱动表单的所有特性，包括 ngModel。

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

2，用 ngFor 添加超能力

英雄必须从认证过的固定列表中选择一项超能力。 这个列表位于 HeroFormComponent 中。

在表单中添加 select，用 ngFor 把 powers 列表绑定到列表选项。 之前的显示数据一章中见过 ngFor。

<div class="form-group">
  <label for="power">Hero Power</label>
  <select class="form-control" id="power" required>
    <option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>//option的value值绑定到遍历后的pwo上
  </select>
</div>

找到 Name 对应的 <input> 标签，并且像这样修改它：

<input type="text" class="form-control" id="name"
       required
       [(ngModel)]="model.name" name="name">//  [(ngModel)] 双向绑定  把model的name和模板的输入双向绑定
TODO: remove this: {{model.name}}

聚焦到绑定语法 [(ngModel)]="..." 上。

你需要更多的工作来显示数据。在表单中声明一个模板变量。往 <form> 标签中加入 #heroForm="ngForm"，代码如下：

<form #heroForm="ngForm">

heroForm 变量是一个到 NgForm 指令的引用，它代表该表单的整体。

注意，<input> 标签还添加了 name 属性 (attribute)，并设置为 "name"，表示英雄的名字。 使用任何唯一的值都可以，但使用具有描述性的名字会更有帮助。 当在表单中使用 [(ngModel)] 时，必须要定义 name 属性。 //此处不是说name属性必须定义为“name”,是必须定义name属性，值可以任意，比如name=“haha”

3,通过 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 来提供视觉反馈。