[Angular2] Forms（表单）

Angular表单通常包含双向数据绑定、变化跟踪、验证、错误处理等。接下来学习如何构建一个简单的表单，包括以下内容：

• 使用组件和模板构建Angular表单
• 使用双向数据绑定语法ngModel读写input的值
• 使用ngControl指令跟踪表单的状态变化和有效性
• 使用ngControl指令为表单控件添加CSS类
• 显示验证的错误消息并启用/禁用表单控件
• 使用本地模板变量在控件之间共享信息

我们要实现一个简单的的注册页面，当有必填项没填时，显示验证信息并禁用提交按钮：

首先，创建一个项目文件夹angular2-forms，按照[QuickStart]创建项目。

创建User模型

在app文件夹下新建文件user.ts，创建一个User类，其中有三个必填字段（id、name、email），一个可选字段（address）：

export class User {
  constructor(
    public id: number,
    public name: string,
    public city: string,
    public email?: string
  ) {  }
}

创建Form组件

一个Angular表单包含两部分：基于HTML的模板和处理数据及用户交互的组件。

在文件夹app下创建文件user-form.component.ts，

import {Component} from 'angular2/core';
import {NgForm}    from 'angular2/common';
import { Hero }    from './user';
@Component({
  selector: 'user-form',
  templateUrl: 'app/user-form.component.html'
})
export class UserFormComponent {
  cities = ['BeiJing', 'ShangHai',
            'NanJing', 'ShenZhen'];
  model = new User(18, 'Xiao Hui', this.cities[2], '[email protected]');
  submitted = false;
  onSubmit() { this.submitted = true; }
  // TODO: Remove this when we're done
  get diagnostic() { return JSON.stringify(this.model); }
}

修改根组件app.component.ts，调用新创建的UserForm组件：

import {Component}         from 'angular2/core';
import {HeroFormComponent} from './user-form.component'

@Component({
  selector: 'my-app',
  template: '<user-form></user-form>',
  directives: [UserFormComponent]
})
export class AppComponent { }

创建HTML表单模板

在app文件夹下创建文件user-form.component.html：

<div class="container">
    <h1>User Form</h1>
    <form>
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" required>
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="text" class="form-control">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

这是一个普通的HTML5片段，还没有添加Angular的绑定和指令，只是页面布局。其中，container、form-group、form-control和btn这些样式来自Twitter Bootstrap。

安装Bootstrap，在项目根文件夹下执行：

npm install bootstrap --save

在index.html中添加样式文件的引用：

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

*ngFor绑定数组

用户在表单中使用下拉列表来选择城市，使用NgFor来绑定数组：

<div class="form-group">
  <label for="city">City</label>
 <select class="form-control" required>
 <option *ngFor="#c of cities" [value]="c">{{c}}</option>
  </select>
</div>

使用*ngModel双向绑定数据

运行应用，结果如下：

.png

界面上没有数据，是因为我们还没有绑定User。前面两篇学习了属性绑定和事件绑定来更新组件属性后和页面的值。这里使用一种新的方法，使用NgModel指令实现双向数据绑定。

<div class="container">
    <h1>User Form</h1>
    <form>
      {{diagnostic}}
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" required
          [(ngModel)]="model.name" >
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="text"  class="form-control"
          [(ngModel)]="model.email">
      </div>
      <div class="form-group">
        <label for="city">City</label>
        <select class="form-control"  required
          [(ngModel)]="model.city" >
          <option *ngFor="#c of cities" [value]="c">{{c}}</option>
        </select>
      </div>
    </form>
</div>

运行应用，改变界面上的值。可以看到{{diagnostic}}中的调试信息也随着改变，说明双向数据绑定生效了。

.png

[(ngModel)]的原理

在属性绑定中，值从模型流向视图中的目标属性，我们将目标属性放在方括号[]中，这是从模型到视图的单向数据绑定。

在事件绑定中，我们将视图中的目标属性的值流向模型，我们将目标属性放在圆括号()中，这是从视图到模型的单向数据绑定。

Angular将两者结合起来，形成[()]，来标识双向数据绑定。

事实上，我们也可以将NgModel绑定拆分成两部分：

<input type="text" class="form-control" required
  [ngModel]="model.name"
  (ngModelChange)="model.name = $event" >

这里的属性绑定跟之前介绍的是一样的，但是事件绑定看起来就有点奇怪了。ngModelChange并不是<input>元素的事件，它实际上是NgModel指令的事件属性。当Angular遇到[(x)]这样的绑定时，它希望指令x有一个x输入属性和一个xChange输出属性。

另一个奇怪的地方是模板表达式model.name = $event。我们在前面见过来自DOM事件的$event对象。ngModelChange属性并不产生DOM事件，它只是一个Angular的EventEmitter属性，当该事件触发时，它返回的是input文本框的值。

使用ngControl跟踪状态变化和有效性

一个表单不仅仅有数据绑定。我们还希望知道表单中控件的状态。

ngControl指令可以告诉我们用户是否触发了控件、值是否改变了、值是否是无效的。

这个指令不仅仅跟踪状态，它还会使用特殊的Angular的CSS类更新组件。我们可以利用这些CSS类来改变控件的外观或控制控件的显示与隐藏。

我们为表单中的三个input控件添加ngControl，例如：

<input type="text" class="form-control" required
  [(ngModel)]="model.name"
  ngControl="name" >

在这里，我们给ngControl指定的是name。其实任何唯一值都可以。

在内部，Angular会创建Controls并使用<form>的NgForm指令将他们注册到ngControl的名称下。

在我们的模板中，ngControl 属性实际上映射为NgControlName指令。还有一个NgControl指令，跟这个不是同一个东西。但是我们通常忽略他们的区别，就把NgControlName当成NgControl指令。

在Angular引擎中，双向绑定语法中的ngModel是NgControlName指令的一个属性，不再涉及到NgModel指令。因为我们只需要一个指令来管理DOM元素，具体是哪个指令没什么区别。

添加自定义CSS

NgControl指令不仅仅跟踪状态，它还会更新CSS类来反映状态。

• 控件是否被访问：如果控件被访问，那么给控件添加ng-touched类，反之ng-untouched
• 控件的值是否有变化：如果有变化，那么给控件添加ng-dirty类，反之ng-pristine
• 控件的值是否有效：如果有效，那么给控件添加ng-valid类，反之ng-invalid

例如为Name文本框添加本地模板变量，测试控件在状态发生变化时CSS类的变化：

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

接下来，我们利用ng-valid | ng-invalid来做验证提示。效果如图：

添加两个样式来实现上面的效果。在项目根文件夹下创建文件forms.css：

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

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

并在index.html中添加引用：

<link rel="stylesheet" href="forms.css">

上面的提示只指示验证是否有效，如果无效的话，没有给出错误消息。因此我们加上提示消息：

为Name文本框添加本地模板变量，并在它下面添加显示错误信息的<div>：

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

这里，我们在控件为valid或pristine时隐藏提示信息。pristine表示页面加载后我们还没有改变控件值的状态。

上面的代码中，本地模板变量的值为ngForm。为什么是ngForm呢？一个指令的exportAs属性用来告诉Angular如何链接本地变量到指令。我们将本地变量赋值为ngForm是因为，NgControlName指令的exportAs属性正好是ngForm。

这个看起来有点不直观。因为，Angular中的控件指令中，NgForm、NgModel、NgControlName和NgControlGroup的exportAs属性都是ngForm，但是我们只能在控件上使用其中一个指令。

添加User并重置表单

添加一个New User按钮，，将点击事件绑定到组件的方法：

<button type="button" class="btn btn-default" (click)="newUser()">New User</button>

在组件中添加方法：

newUser() {
  this.model = new User(42, '', '');
}

运行应用并点击按钮，必填项的文本框左侧会显示红色，但是不会显示提示信息，因为我们并没有改变控件中的值。

输入名称后再点击按钮，这时候会现实提示信息。为什么会这样呢？我们显示的还是一个空的User也显示提示消息了。

这是因为Name文本框不再是原始状态了。用新的User替换原来的之后，控件的状态并没有被恢复为未修改状态。（Angular不能分辨是model被替换了，还是只清除了name属性的值）。我们必须手动重置表单控件。为组件添加一个active标记，初始值为true，当我们添加一个新的User，将active切换为false，然后使用setTimeout立刻将它切换回true。

active = true;

newUser() {
  this.model = new User(42, '', '');
  this.active = false;
  setTimeout(()=> this.active=true, 0);
}

为form绑定active标记：

<form *ngIf="active">

这样，点击按钮后form会从DOM移除再重新创建，页面会闪一下。这样表单控件都是初始的未修改状态了。

使用ngSubmit提交表单

用户填写完表单后应该能提交表单。在页面地步添加一个Submit按钮，该按钮本身并不做什么，但是它会出发表单提交。因为它的type为submit。然后还要在<form>上使用NgSubmit指令，绑定到组件的onSubmit()方法：

<form *ngIf="active" (ngSubmit)="onSubmit()" #userForm="ngForm">

这里，我们又定义了一个本地变量#userForm，赋值为ngForm，这样heroForm就指向管理整个表单的NgForm指令了。

等等，怎么是NgForm指令呢？我们根本就没有添加NgForm指令啊？

这是因为Angular自动为<form>创建并添加NgForm指令。

NgForm指令为form元素补充了一些额外的特性。它包含使用ngControl属性的元素，监控它们的属性包括有效性。它本身也有一个valid属性，当它包含的控件全都有效时为true。

将Submit按钮的disabled属性绑定到表单的有效性：

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

在表单之间切换

用一个<div>包装表单，将它的hidden属性绑定到组件的submitted属性：

<div  [hidden]="submitted">
 <h1>User Form</h1>
 <form *ngIf="active" (ngSubmit)="onSubmit()" #userForm="ngForm">

    <!-- ... all of the form ... -->

 </form>
</div>

在组件中添加：

submitted = false;

onSubmit() { this.submitted = true; }

当我们点击Submit按钮，submitted值变成true，表单就会被隐藏。这时候显示一些其他信息：

<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">Email</div>
    <div class="col-xs-9 pull-left">{{ model.email }}</div>
  </div>
  <div class="row">
    <div class="col-xs-3">City</div>
    <div class="col-xs-9 pull-left">{{ model.city }}</div>
  </div>
  <br>
  <button class="btn btn-default" (click)="submitted=false">Edit</button>
</div>

我们添加了Edit按钮，点击后将清除submitted标志，这样就重新显示之前的可编辑的表单啦。

在浏览器中的效果如下：

点此下载完整代码

参考资料

Angular官方文档