细说 Angular 2+ 的表单（二）：响应式表单

摘要

在企业应用开发时，表单是一个躲不过去的事情，和面向消费者的应用不同，企业领域的开发中，表单的使用量是惊人的。这些表单的处理其实是一个挺复杂的事情，比如有的是涉及到多个 Tab 的表单，有的是向导形式多个步骤的，各种复杂的验证逻辑和时不时需要弹出的对话框等等。笔者试图在这一系列文章中对 Angular 中的表单处理做一个相对完整的梳理。

Angular 中提供两种类型的表单处理机制，一种叫模版驱动型（Template Driven）的表单，另一种叫模型驱动型表单（ Model Driven ），这后一种也叫响应式表单 （ Reactive Forms ），由于模版驱动中有一个 ngModel 的指令，容易和这里说的模型驱动混淆，所以在我们的文章中叫后一种说法：响应式表单。

第一篇主要介绍模版驱动型的表单。

模版驱动的表单

模版驱动的表单和 AngularJS 对于表单的处理类似，把一些指令（比如 ngModel ）、数据值和行为约束（比如 require 、minlength 等等）绑定到模版中（模版就是组件元数据 @Component 中定义的那个 template ），这也是模版驱动这个叫法的来源。总体来说，这种类型的表单通过绑定把很多工作交给了模版。

模版驱动的例子

还是用例子来说话，比如我们有一个用户注册的表单，用户名就是 email ，还需要填的信息有：住址、密码和重复密码。这个应该是比较常见的一个注册时需要的信息了。那么我们第一步来建立领域模型：

// src/app/domain/index.ts
export interface User {
  // 新的用户id一般由服务器自动生成，所以可以为空，用 ? 标示
  id?: string; 
  email: string;
  password: string;
  repeat: string;
  address: Address;
}

export interface Address {
  province: string; // 省份
  city: string; // 城市
  area: string; // 区县
  addr: string; // 详细地址
}

接下来我们建立模版文件，一个最简单的 HTML 模版，先不增加任何的绑定或事件处理：

<!-- template-driven.component.html -->
<form novalidate>
  <label>
    <span>电子邮件地址</span>
    <input
      type="text"
      name="email"
      placeholder="请输入您的 email 地址">
  </label>
  <div>
    <label>
      <span>密码</span>
      <input
        type="password"
        name="password"
        placeholder="请输入您的密码">
    </label>
    <label>
      <span>确认密码</span>
      <input
        type="password"
        name="repeat"
        placeholder="请再次输入密码">
    </label>
  </div>
  <div >
    <label>
      <span>省份</span>
      <select name="province">
        <option value="">请选择省份</option>
      </select>
    </label>
    <label>
      <span>城市</span>
      <select name="city">
        <option value="">请选择城市</option>
      </select>
    </label>
    <label>
      <span>区县</span>
      <select name="area">
        <option value="">请选择区县</option>
      </select>
    </label>
    <label>
      <span>地址</span>
      <input type="text" name="addr">
    </label>
  </div>
  <button type="submit">注册</button>
</form>

渲染之后的效果就像下面这样：

Angular从零到一