Angular 2 快速入门：表单

表单是任何一个应用的基石，在 Angular 2 中，表单的实现作了不少改变。

曾经在 Angular 1 中，我们使用 ngModel 将表单数据映射至应用的数据模型，但是在 Angular 2，我们可以使用表单控件更加明确地构建表单，虽然看上去，相比于 Angular 1，我们需要写更多的代码，但是却不可以让我们不再需要去解决那些烦人的 ngModel 声明与数据绑定问题了。

一个简单的表单示例

<form [ngFormModel]="loginForm" (submit)="doLogin($event)">
  <input ngControl="email" type="email" placeholder="Email" />
  <input ngControl="password" type="password" placeholder="Password"| />
  <button type="submit">Log in</button>
</form>

与其相应的组件 JS 代码如下：

import {Component, FormBuilder, Validators} from 'angular2/angular2'

@Component({
  selector: 'login-page',
  templateUrl: 'login-page.html'
})
export class LoginPage {
  constructor (fb: FormBuilder) {
    this.loginForm = fb.group({
      email: ["", Validators.required],
      password: ["", Validators.required]
    });
  }

  doLogin(event) {
    console.log(this.loginForm.value);
    event.preventDefault();
  }
}

当我们运行该应用时，浏览器中会展示如下的登录表单

    +--------------------+
    | Email              |
    +--------------------+

    +--------------------+
    | Password           |
    +--------------------+

    +--------------------+
    |      Log in        |
    +--------------------+

表单构建器（FormBuilder）

在上面的示例中，我们使用了 FormBuilder，它可以让我们可以快速方便的定义表单控件以及每一个控件需要绑定的验证器，在上面示例中，我们创建了两个文本输入框 email 与 password ：

this.loginForm = fb.group({
  email: ["", Validators.required],
  password: ["", Validators.required]
})

控件组（ControlGroup）

FormBuilder 创建的就是 ControlGroup 实例，我们称之为 form，除了使用 FormBuilder 之外，我们还可以直接手工构建 ControlGroup：

this.loginForm = new ControlGroup({
  email: new Control("email", Validators.required),
  password: new Control("password", Validators.required)
});

但是在实际的开发中，使用 FormBuilder 会方便很多。

表单指令 (For,m Directives)

上面的示例中，你应该已经注意到了，没有使用一个 ngModel 声明，但是我们使用 ngControl 将表单中的值映射至控件对象中。

<input ngControl="email" type="email" placeholder="Email" />

这将 email 输入框 ”绑定“ 至了 email 控件。

自定义验证器

我们可以创建自定义的验证器，它就是一个简单的函数：

function containsMagicWord(c: Control) {
  if(c.value.indexOf('magic' >= 0) {
    return {
      noMagic: true
    }
  }
  
  // Null 表示验证通过
  return null;
}

this.loginForm = fb.group({
  email: ["", containsMagicWord],
  password: ["", Validators.required],
});

处理表单数据

我们可以通过很方便的访问表单对应的 JavaScript 对象，或者某一个控件的值：

doLogin(event) {
  // 展示表单的数据
  var formData = this.loginForm.value;
 
  // 或者获取控件的值
  var email = this.loginForm.controls.email.value;

  event.preventDefault();
}