在 Angular 2 中构建表单需要结合组件、模板与表单模块，实现数据绑定、校验与提交流程。本文将按步骤演示如何从零搭建一个网站信息录入表单，涵盖模型定义、双向绑定、状态反馈与提交控制，帮助开发者快速掌握模板驱动表单的核心机制。
初始化项目与定义数据模型
首先准备 Angular 2 项目环境，可参考官方 TypeScript 环境配置指南，或直接下载基础源码。解压后将目录重命名为 angular-forms，并修改 angular-forms/package.json 中的 "name": "angular-quickstart" 为 "name": "angular-forms"。完成后执行 cnpm install 安装依赖。
接下来定义表单所需的数据模型。在 angular-forms/app 目录下创建 site.ts，包含三个必需字段（id、name、url）与一个可选字段（alexa）：
export class Site {
constructor(
public id: number,
public name: string,
public url: string,
public alexa?: number
) { }
}其中 public 声明的字段为公有属性，alexa? 的问号表示该字段为可选。
创建表单组件与根模块配置
Angular 表单由 HTML 模板与处理数据的组件两部分组成。在 angular-forms/app 目录下创建 site-form.component.ts：
import { Component } from '@angular/core';
import { Site } from './site';
@Component({
moduleId: module.id,
selector: 'site-form',
templateUrl: 'site-form.component.html'
})
export class SiteFormComponent {
urls = ['www.runoob.com', 'www.google.com',
'www.taobao.com', 'www.facebook.com'];
model = new Site(1, '菜鸟教程', this.urls[0], 10000);
submitted = false;
onSubmit() { this.submitted = true; }
// TODO: 完成后移除
get diagnostic() { return JSON.stringify(this.model); }
}@Component 的 selector 为 site-form，表示可通过 templateUrl 指向独立的 HTML 模板文件，diagnostic 用于调试时输出模型的 JSON 数据。
模板驱动表单依赖 FormsModule，需在根模块中引入。修改 app/app.module.ts：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { SiteFormComponent } from './site-form.component';
@NgModule({
imports: [
BrowserModule,
FormsModule
],
declarations: [
AppComponent,
SiteFormComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }修改根组件 app/app.component.ts，将表单组件嵌入模板：
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '编写模板与双向数据绑定
创建初始模板文件 app/site-form.component.html，包含基础表单结构：
网站表单
为使用 Bootstrap 样式，在项目根目录执行 cnpm install bootstrap --save，并在 index.html 的 中添加：
执行 npm start 后访问 http://localhost:3000/，可看到基础表单界面：
接下来使用 ngModel 实现双向数据绑定，将表单控件与组件模型关联：
网站表单
每个 input 的 id 与 label 的 for 对应，name 属性用于 Angular 表单模块注册控制器。运行后界面如下：
表单状态跟踪与验证反馈
ngModel 会根据控件状态自动添加 CSS 类，便于实现视觉反馈：
| 状态 | 为 true 时的类 | 为 false 时的类 |
|---|---|---|
| 控件已被访问 | ng-touched | ng-untouched |
| 控件值已变化 | ng-dirty | ng-pristine |
| 控件值有效 | ng-valid | ng-invalid |
在项目根目录创建 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 中引入该样式：
修改模板，通过模板引用变量 #name="ngModel" 获取控件状态，并控制错误提示的显隐：
网站表单
清空网站名字段后，错误提示将显示：
表单提交与新增逻辑
在模板中添加“新增网站”按钮，并绑定点击事件：
在组件中实现 newSite() 方法，通过 active 标记与 setTimeout 重置表单状态：
active = true;
newSite() {
this.model = new Site(5, '', '');
this.active = false;
setTimeout(() => this.active = true, 0);
}使用 ngSubmit 指令处理表单提交，并通过模板引用变量 #siteForm="ngForm" 获取表单整体状态：
完整组件代码如下：
import { Component } from '@angular/core';
import { Site } from './site';
@Component({
moduleId: module.id,
selector: 'site-form',
templateUrl: 'site-form.component.html'
})
export class SiteFormComponent {
urls = ['www.runoob.com', 'www.google.com',
'www.taobao.com', 'www.facebook.com'];
model = new Site(1, '菜鸟教程', this.urls[0], 10000);
submitted = false;
onSubmit() { this.submitted = true; }
// TODO: 完成后移除
get diagnostic() { return JSON.stringify(this.model); }
active = true;
newSite() {
this.model = new Site(5, '', '');
this.active = false;
setTimeout(() => this.active = true, 0);
}
}完整模板代码如下：
网站表单
你提交的信息如下:
网站名
{{ model.name }}
网站 alexa 排名
{{ model.alexa }}
网站 URL
{{ model.url }}
通过 submitted 属性控制表单与提交结果的显隐。初始 submitted = false 显示表单，提交后设为 true 隐藏表单并展示结果：
submitted = false;
onSubmit() { this.submitted = true; }最终项目目录结构如下：
完整实例运行效果如下：
