angular2应用表单
表单创建一个有机、有效、引人注目的数据输入体验。 Angular 表单协调一组数据绑定控件，跟踪变更，验证输入的有效性，并且显示错误信息。
从零构建一个简单的表单：会学到
- 1.使用组件和模板构建一个 Angular 表单
- 2.使用 [(ngModel)] 语法实现双向数据绑定，以便于读取和写入输入控件的值
- 3.结合表单来使用 ngModel ，能让我们跟踪状态的变化并对表单控件做验证
- 4.使用特殊的 CSS 类来跟踪控件状态，并提供强烈的视觉反馈
- 5.向用户显示有效性验证的错误提示，以及禁用 / 启用表单控件
- 6.通过模板引用变量，在控件之间共享信息
模板驱动的表单
在模板中按照 Angular 模板语法 来构建表单。Angular 也支持的另一种方式叫做模型驱动表单 Model-Driven Forms
创建表单步骤:
- 创建 Hero 模型类
- Create the Hero model class
- 创建控制此表单的组件
- 创建具有初始表单布局的模板
- 使用 ngModel 双向数据绑定语法把数据属性绑定到每个表单输入控件
- 往每个表单输入控件上添加 name 属性 (Attribute)
- 添加自定义 CSS 来提供视觉反馈
- 显示和隐藏有效性验证的错误信息
- 使用 ngSubmit 处理表单提交
- 禁用此表单的提交按钮，直到表单变为有效
（1）创建一个 Hero 模型类
像以前的那样创建一个类；
创建一个hero.ts文件并添加类和类的属性；
<pre>
export class Hero {
constructor(
public id: number,
public name: string,
public power: string,
public alterEgo?: string
) { }
}</pre>
TypeScript 编译器为构造函数中每个标为 public 的参数创建一个公有字段，并在创建新的英雄实例时，把参数值自动赋给这些公有字段。
alterEgo 是可选的，构造函数允许我们省略它，注意 alterEgo? 中的问号 (?) 。
（2）创建一个表单组件
每个 Angular 表单分为两部分：一个基于 HTML 的模板，和一个基于代码的组件，它用来处理数据和用户交互。
创建一个名叫 hero-form.component.ts 的文件，并且放进下列定义：
<pre>import { Component } from '@angular/core';
import { Hero } from './hero';
@Component({
moduleId: module.id,
selector: 'hero-form',
templateUrl: 'hero-form.component.html'
})
export class HeroFormComponent {
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; }
// TODO: Remove this when we're done
get diagnostic() { return JSON.stringify(this.model); }
}
</pre>
修改 app.module.ts
<pre>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 { }</pre>
特殊处：如果一个组件、指令或管道出现在模块的 imports 数组中，就说明它是外来模块， 不要 再到 declarations 数组中声明它们。 如果你自己写的它，并且它属于当前模块， 就要 把它声明在 declarations 数组中。
修改原来的app.component.ts
<pre>import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<hero-form></hero-form>'
})
export class AppComponent { }</pre>意义在于把上边的模板嵌套到my-app标签中
（3）创建一个初始 hero-form.component.html表单模板
<div class="container">
<h1>Hero Form</h1>
<form>
<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-default">Submit</button>
</form>
</div>
container、 form-group 、 form-control 和 btn 类来自 Twitter Bootstrap 。纯粹是装饰。 我们使用 Bootstrap 来打扮我们的表单。
表单不需要任何样式库,添加样式纯粹来装饰表单的。
我们来添加样式表。
在应用的根目录下打开一个终端窗口，敲如下命令：
npm install bootstrap --save
打开 index.html 文件并且把下列链接添加到 <head> 中。
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
用 ngFor 添加超能力
在**app/hero-form.component.html **中 Alter Ego 的紧下方添加如下 HTML ：
<pre><div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" id="power" required>
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
</select>
</div></pre>
我们为列表中的每一项超能力渲染出一个 <option> 标签。 模板输入变量 p 在每个迭代中都代表一个不同的超能力，我们使用双花括号插值表达式语法来显示它的名称。
使用 ngModel 进行双向数据绑定
[(ngModel)] 语法，它使用一种超简单的方式把我们的表单绑定到模型
表明数据从输入框流动到模型，再反向流动回来的过程。 这就是双向数据绑定！
让我们用类似的方式把 [(ngModel)] 绑定添加到 第二人格 和 超能力 属性。 我们将抛弃输入框的绑定消息，并在组件顶部添加一个到 diagnostic 的新绑定。 这样我们能确认双向数据绑定 在整个 Hero 模型上 都能正常工作了
修改app/hero-form.component.html
<pre>{{diagnostic}}
<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 p of powers" [value]="p">{{p}}</option>
</select>
</div></pre>
（4）通过 ngModel 跟踪修改状态与有效性验证
表单不仅是关于数据绑定的。我们还希望知道表单中各个控件的状态，NgModel 指令不仅仅跟踪状态。它还使用三个 CSS 类来更新控件，以便反映当前状态。 我们可以通过定制这些 CSS 类的样式来更改控件的外观，以及让消息被显示或隐藏。我们往姓名 <input> 标签上添加一个名叫 spy 的临时 模板引用变量 ，然后用这个 spy 来显示它上面的所有 css 类。
<pre><input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name"
spy >
TODO: remove this: {{spy.className}}</pre>
现在，运行本应用，并让 *姓名 *输入框获得焦点。 然后严格按照下面四个步骤来做：
- 1.查看输入框，但别碰它
- 2.点击输入框，然后点击输入框外面
- 3.在名字的末尾添加一个斜杠
- 4.删除名字
动作和它对应的效果如下：
control-state-transitions-anim.gif
这个没有颜色效果，可以自己去搜搜
添加自定义 CSS ，以提供视觉反馈
validity-required-indicator.png
新建一个
forms.css文件，添加两个样式的定义就达到了预期效果。<pre>forms.css
.ng-valid[required], .ng-valid.required {
border-left: 5px solid #42A948; /* green /
}
.ng-invalid:not(form) {
border-left: 5px solid #a94442; / red */
}
index.html
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="forms.css">
</pre>
（45）显示和隐藏有效性校验的错误信息
当用户删除姓名时，显示方式应该是这样的：
name-required-error.png
修改app/hero-form.component.html中的name框：
<pre><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>
</pre>
我们需要一个模板引用变量来访问模板中输入框的 Angular 控件。 这里，我们创建了一个名叫 name的变量，并且把它赋值为 "ngModel" .现在，通过把 div元素的 hidden属性绑定到 name控件的属性，我们就可以控制“姓名”字段错误信息的可见性了。
修改
app/hero-form.component.html<pre><div [hidden]="name.valid || name.pristine"
class="alert alert-danger">
</pre>
添加一个英雄，并且重置表单
新增一个英雄按钮和英雄方法：<pre>
app/hero-form.component.html
<button type="button" class="btn btn-default" (click)="newHero()">New Hero</button>
app/hero-form.component.ts:
newHero() {
this.model = new Hero(42, '', '');
}
</pre>
通过 ngSubmit 来提交表单
<pre><form ngIf="active" (ngSubmit)="onSubmit()" #heroForm="ngForm">
<button type="submit" class="btn btn-default" [disabled]="!heroForm.form.valid">Submit</button></pre>
[disabled]代表删除必填项变灰和提交后变灰，
NgForm 指令:Angular 替我们做了。 Angular 自动创建了 NgForm 指令，并且把它附加到 <form> 标签上。
NgForm 指令为普通的 form 元素扩充了额外的特性。 它持有我们通过 ngModel 指令和 name 属性为各个元素创建的那些控件类，并且监视它们的属性变化，包括有效性。 它还有自己的 valid 属性，只有当 每一个被包含的控件 都有效时，它才有效。在填表完成之后，用户还应该能提交这个表单。 “提交”按钮位于表单的底部，它自己不会做任何事，但因为具有特殊的 type 值 (type="submit") ，所以它会触发表单提交。仅仅触发“表单提交”在目前是没用的。 要让它有用，我们还要用另一个 Angular 指令更新 <form> 标签—— NgSubmit ， 并且通过事件绑定机制把它绑定到 HeroFormComponent.submit() 方法上。
##这节结束了 请点个赞吧——_——*
