今日完成

表单

表单是商业应用的支柱，你用它来执行登录、求助、下单、预订机票、安排会议，以及不计其数的其它数据录入任务。

在开发表单时，创建数据方面的体验是非常重要的，它能指引用户明晰、高效的完成工作流程。

模板驱动表单简介

开发表单需要设计能力（那超出了本章的范围），而框架支持双向数据绑定、变更检测、验证和错误处理

用组件和模板构建 Angular 表单

用 ngModel 创建双向数据绑定，以读取和写入输入控件的值

跟踪状态的变化，并验证表单控件

使用特殊的 CSS 类来跟踪控件的状态并给出视觉反馈

向用户显示验证错误提示，以及启用/禁用表单控件

使用模板引用变量在 HTML 元素之间共享信息

准备工作

创建一个名为 angular-forms 的新项目：

content_copy

ng new angular-forms

创建 Hero 模型类

当用户输入表单数据时，需要捕获它们的变化，并更新到模型的实例中。 除非知道模型里有什么，否则无法设计表单的布局。

最简单的模型是个“属性包”，用来存放应用中一件事物的事实。 这里使用三个必备字段 (id、name、power)，和一个可选字段 (alterEgo，译注：中文含义是第二人格，例如 X 战警中的 Jean / 黑凤凰)。

使用 Angular CLI 命令 ng generate class 生成一个名叫 Hero 的新类：

content_copy

ng generate class Hero

内容如下：

src/app/hero.ts

content_copy

export class Hero {

  constructor(

    public id: number,

    public name: string,

    public power: string,

    public alterEgo?: string

  ) {  }

}

创建表单组件

Angular 表单分为两部分：基于 HTML 的模板和组件类，用来程序处理数据和用户交互。 先从组件类开始，是因为它可以简要说明英雄编辑器能做什么。

使用 Angular CLI 命令 ng generate component 生成一个名叫 HeroForm 的新组件：

content_copy

ng generate component HeroForm

内容如下：

src/app/hero-form/hero-form.component.ts (v1)

content_copy

import { Component } from '@angular/core';

import { Hero }    from '../hero';

@Component({

  selector: 'app-hero-form',

  templateUrl: './hero-form.component.html',

  styleUrls: ['./hero-form.component.css']

})

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); }

}

这个组件没有什么特别的地方，没有表单相关的东西，与之前写过的组件没什么不同。

只要用前面章节中学过的 Angular 概念，就可以完全理解这个组件：

这段代码导入了 Angular 核心库以及你刚刚创建的 Hero 模型。

@Component 选择器“hero-form”表示可以用 <app-hero-form> 标签把这个表单放进父模板。

templateUrl 属性指向一个独立的 HTML 模板文件。

你定义了一些用来演示的，关于 model 和 powers 的模拟数据。