angular-docs-cn/public/docs/ts/latest/guide/forms.jade

include ../_util-fns

:marked
  We’ve all used a form to login, submit a help request, place an order, book a flight,
  schedule a meeting and perform countless other data entry tasks.
  Forms are the mainstay of business applications.

  我们全都使用表单来执行登录、求助、下单、预订机票、发起会议，以及不计其数的其它数据录入任务。
  
  Any seasoned web developer can slap together an HTML form with all the right tags.
  It's more challenging to create a cohesive data entry experience that guides the
  user efficiently and effectively through the workflow behind the form.

  不管什么样的Web开发者，都能使用正确的标签“捏”出一个HTML。
  但要想做出一个能整合数据输入体验的表单，以指导用户明晰、高效的走通表单背后的工作流，就是一个挑战了。
  
  *That* takes design skills that are, to be frank, well out of scope for this chapter.
  
  *这当中* 所需要的设计技能，坦白讲，确实超出了本章的范围。

  It also takes framework support for
  **two-way data binding, change tracking, validation, and error handling**
  ... which we shall cover in this chapter on Angular forms.
  
  它也需要框架支持，来实现 **双向数据绑定、变更跟踪、有效性验证和错误处理**
  这些Angular表单相关的内容，是本章将会覆盖的。

  We will build a simple form from scratch, one step at a time. Along the way we'll learn
  
  我们将构建一个简单的表单，我们把它简化到只需要一次一步。通过这种方式，我们将学到：

  - to build an Angular form with a component and template
  - 使用组件和模板构建一个Angular表单

  - two-way data binding with `[(ngModel)]` syntax for reading and writing values to input controls
  - 使用`[(ngModel)]`语法实现双向数据绑定，以便从输入控件中读取和写入值

  - using `ngControl` to track the change state and validity of form controls
  - 使用`ngControl`来跟踪变更状态以及对表单控件做验证

  - the special CSS classes that `ngControl` adds to form controls and how we can use them to provide strong visual feedback
  - 那些`ngControl`往表单控件上添加的特殊的CSS类，以及我们该如何使用它们来提供强烈的视觉反馈

  - displaying validation errors to users and enable/disable form controls
  - 给用户显示有效性验证的错误信息，以及禁用/使能表单控件

  - sharing information among controls with template local variables
  - 在控件和局部模板变量之间共享信息
  
  [Live Example](/resources/live-examples/forms/ts/plnkr.html)
  
  [鲜活范例](/resources/live-examples/forms/ts/plnkr.html)
.l-main-section
:marked
  ## Template-Driven Forms
  ## 模板驱动的表单

  Many of us will build forms by writing templates in the Angular [template syntax](./template-syntax.html) with
  the form-specific directives and techniques described in this chapter.
  
  大多数人都可以使用表单特有指令和本章所描述的技术，在模板中按照Angular[模板语法](./template-syntax.html)来构建表单。
.l-sub-section
  :marked
    That's not the only way to create a form but it's the way we'll cover in this chapter.
    
    这不是创建表单的唯一方式，但它是我们将在本章中使用的方式。
:marked
  We can build almost any form we need with an Angular template — login forms, contact forms ... pretty much any business forms.
  We can lay out the controls creatively, bind them to data, specify validation rules and display validation errors,
  conditionally enable or disable specific controls, trigger built-in visual feedback, and much more.
  
  我们可以构建需要在Angular模板中使用的几乎所有的表单 —— 登录表单、联系人表单 …… 大量的各种商务表单。
  我们可以创造性的摆放各种控件、把它们绑定到数据、指定校验规则、显示校验错误、有条件的禁用/使能特定的控件、触发内置的视觉反馈等等，不胜枚举。

  It will be pretty easy because Angular handles many of the repetitive, boiler plate tasks we'd
  otherwise wrestle with ourselves.
  
  它的确很简单，这是因为Angular帮我们处理了大多数重复、单调的任务，这让我们可以不必亲自操刀、身陷其中。

  We'll discuss and learn to build the following template-driven form:
  
  我们将讨论和学习构建如下的“模板驱动”表单：

figure.image-display
  img(src="/resources/images/devguide/forms/hero-form-1.png" width="400px" alt="Clean Form")

:marked
  Here at the *Hero Employment Agency* we use this form to maintain personal information about the
  heroes in our stable. Every hero needs a job. It's our company mission to match the right hero with the right crisis!
  
  这里是 *英雄职业介绍所* ，我们使用这个表单来维护我们候选英雄们的个人信息。每个英雄都需要一个工作。我们公司的任务就是让正确的英雄去解决他/她所擅长的危机！

  Two of the three fields on this form are required. Required fields have a green bar on the left to make them easy to spot.
  
  这个表单中的三个字段都是必填的。这些必填的字段在左侧会有一个绿色的条儿，让它们更容易看出来。

  If we delete the hero name, the form displays a validation error in an attention grabbing style:
  
  如果我们删除了英雄的名字，表单就会用一种引人注目的样式把验证错误显示出来。

figure.image-display
  img(src="/resources/images/devguide/forms/hero-form-2.png" width="400px" alt="无效！名字是必填项")

:marked
  Note that the submit button is disabled and the "required" bar to the left of the input control changed from green to red.
  
  注意，提交按钮被禁用了，而且输入控件左侧的“必填”条从绿色变为了红色。

.l-sub-section
  p We'll customize the colors and location of the "required" bar with standard CSS.
  
  p 我们将使用标准CSS来定制“必填”条的颜色和位置。

:marked
  We will build this form in the following sequence of small steps
  
  我们将按照一系列很小的步骤来构建此表单：

  1. Create the `Hero` model class
  1. 创建`Hero`模型类
  1. Create the component that controls the form
  1. 创建控制此表单的组件
  1. Create a template with the initial form layout
  1. 创建具有初始表单布局的模板
  1. Bind data properties to each form input control with the `ngModel` two-way data binding syntax
  1. 使用`ngModel`双向数据绑定语法把数据属性绑定到每个表单输入控件
  1. Add the **ngControl** directive to each form input control
  1. 往每个表单输入控件上添加 **ngControl** 指令
  1. Add custom CSS to provide visual feedback
  1. 添加自定义CSS来显示视觉反馈
  1. Show and hide validation error messages
  1. 显示和隐藏有效性验证的错误信息
  1. Handle form submission with **ngSubmit**
  1. 使用 **ngSubmit** 处理表单提交
  1. Disable the form’s submit button until the form is valid
  1. 禁用此表单的提交按钮，直到表单变为有效的

:marked
  ## Setup
  ## 起步
  Create a new project folder (`angular2-forms`) and follow the steps in the [QuickStart](../quickstart.html).
  
  创建一个新的项目文件夹（`angular2-forms`），并且遵循[QuickStart](../quickstart.html)中的步骤进行初始化。

include ../_quickstart_repo
:marked
  ## Create the Hero Model Class
  ## 创建一个Hero模型类

  As users enter form data, we capture their changes and update an instance of a model.
  We can't layout the form until we know what the model looks like.
  
  当用户输入表单数据时，我们捕获他们的更改，并且更新到模型的一个实例中。
  除非我们知道了模型里有什么，否则没办法开始设计表单。

  A model can be as simple as a "property bag" that holds facts about a thing of application importance.
  That describes well our `Hero` class with its three required fields (`id`, `name`, `power`)
  and one optional field (`alterEgo`).
  
  最简单的模型就是一个“属性包儿”，用来存放关于应用中一个重要事物的那些事实。
  这里我们使用三个必备字段（`id`、`name`、`power`），和一个可选字段（`alterEgo`，中文含义：闺蜜/好基友）。

  Create a new file in the app folder called `hero.ts` and give it the following class definition:
  
  在应用文件夹中创建一个`hero.ts`文件，并且写入下列类定义内容：

+makeExample('forms/ts/app/hero.ts', null, 'app/hero.ts')

:marked
  It's an anemic model with few requirements and no behavior. Perfect for our demo.
  
  这是一个贫血模型，没几条规定也没什么行为。对我们的演示来说很完美。

  The TypeScript compiler generates a public field for each `public` constructor parameter and
  assigns the parameter’s value to that field automatically when we create new heroes.
  
  TypeScript编译器为每个`public`的构造函数参数创建一个公有字段，并且在创建新的英雄实例时，会把参数值自动赋给这些公有字段。
  
  The `alterEgo` is optional and the constructor lets us omit it; note the (?) in `alterEgo?`.
  
  `alterEgo`是可选的，并且构造函数让我们可以省略掉它，注意`alterEgo?`中的问号（?）。

  We can create a new hero like this:
  
  我们可以像这样创建一个新英雄：
code-example(format="").
  let myHero =  new Hero(42, 'SkyDog', 
                         'Fetch any object at any distance', 'Leslie Rollover');
  console.log('My hero is called ' + myHero.name); // "My hero is called SkyDog"
:marked

.l-main-section
:marked
  ## Create a Form component
  ## 创建一个表单组件

  An Angular form has two parts: an HTML-based template and a code-based Component to handle data and user interactions.
  
  每个Angular表单分为两部分：一个基于HTML的模板，和一个基于代码的组件，它用来处理数据和用户交互。

  We begin with the Component because it states, in brief, what the Hero editor can do.
  
  我们从组件开始，是因为它能够简要说明英雄编辑器能做什么。

  Create a new file called `hero-form.component.ts` and give it the following definition:
  
  创建一个名叫`hero-form.component.ts`的文件，并且放进下列定义：

+makeExample('forms/ts/app/hero-form.component.ts', 'first', 'app/hero-form.component.ts')

:marked
  There’s nothing special about this component, nothing form-specific, nothing to distinguish it from any component we've written before.
  
  本组件没有什么特别的地方：没有表单相关的东西，也没有任何地方能把它和我们以前写过的那些组件区分开。

  Understanding this component requires only the Angular 2 concepts we’ve learned in previous chapters
  
  要理解这个组件，只需要我们在前面的章节中已经学过的那些概念：

  1. We import the `Component` decorator from the Angular library as we usually do.
  1. 像往常一样，我们从Angular库中导入`Component`装饰器。

  1. The `@Component` selector value of "hero-form" means we can drop this form in a parent template with a `<hero-form>` tag.
  1. `@Component`选择器的值`hero-form`表示我们将把此表单扔进父模板中的一个`<hero-form>`标签中。

  1. The `templateUrl` property points to a separate file for template HTML called `hero-form.component.html`.
  1. `templateUrl`属性指向一个独立的HTML模板文件，名叫`hero-form.component.html`。

  1. We defined dummy data for `model` and `powers` as befits a demo.
  Down the road, we can inject a data service to get and save real data
  or perhaps expose these properties as [inputs and outputs](./template-syntax.html#inputs-outputs) for binding to a
  parent component. None of this concerns us now and these future changes won't affect our form.
  1. 我们为`model`和`powers`定义了供演示用的假数据。
  接下来，我们可以注入一个用于获取和保存真实数据的服务，或者把这些属性暴露为[输入与输出属性](./template-syntax.html#inputs-outputs)，以便绑定到父组件上。
  注意，我们现在所关注的这些变化，即使将来真的发生了，也不会影响到我们的表单。

  1. We threw in a `diagnostic` property at the end to return a JSON representation of our model.
  It'll help us see what we're doing during our development; we've left ourselves a cleanup note to discard it later.
  1. 我们在最后增加一个`diagnostic`属性，它返回我们这个模型的JSON形式。
  它会帮我们看到在开发中所做的那些事，以后会在清理时丢弃它。

  Why don't we write the template inline in the component file as we often do
  elsewhere in the Developer Guide?
  
  这次我们为什么不像开发人员指南中的其它地方那样写成组件的行内模板呢？

  There is no “right” answer for all occasions. We like inline templates when they are short.
  Most form templates won't be short. TypeScript and JavaScript files generally aren't the best place to
  write (or read) large stretches of HTML and few editors are much help with files that have a mix of HTML and code.
  We also like short files with a clear and obvious purpose like this one.
  
  没有什么回答在所有场合都是“正确”的。当行内模板足够短的时候，我们喜欢用它。
  但大多数的表单模板都不短。普遍来讲，TypeScript和JavaScript文件不会是写大型HTML的好地方（也不好读）。
  而且没有几个编辑器能对混写的HTML和代码提供足够的帮助。
  我们还是喜欢写成像这个一样清晰明确的短文件。

  We made a good choice to put the HTML template elsewhere. 
  We'll write that template in a moment. Before we do, we'll take a step back
  and revise the `app.component.ts` to make use of our new `HeroFormComponent`.
  
  把HTML模板放在别处是一个好的选择。
  我们一会儿就去写那个模板。在这之前，我们先回来修改`app.component.ts`文件，来让它用上我们新的`HeroFormComponent`组件。

.l-main-section
:marked
  ## Revise the *app.component.ts*
  ## 修改 *app.component.ts* 文件

  `app.component.ts` is the application's root component. It will host our new `HeroFormComponent`.
  
  `app.component.ts`是本应用的根组件，我们的`HeroFormComponent`将放在其中。

  Replace the contents of the "QuickStart" version with the following:
  
  把"QuickStart"版的内容替换成下列代码：
+makeExample('forms/ts/app/app.component.ts', null, 'app/app.component.ts')

:marked
.l-sub-section
  :marked
    There are only three changes:
    
    只有三处修改：

    1. We import the new `HeroFormComponent`.
    1. 导入了新的`HeroFormComponent`组件。

    1. The `template` is simply the new element tag identified by the component's `selector` property.
    1. `template`只是简单地换成了`HeroFormComponent`的`selector`属性中指定的新元素标签。

    1. The `directives` array tells Angular that our template depends upon the `HeroFormComponent`
    which is itself a Directive (as are all Components).
    1. `directives`数组告诉Angular，我们的模板依赖于`HeroFormComponent`组件，它本身也是一个指令（所有组件都是指令）。

.l-main-section
:marked
  ## Create an initial HTML Form Template
  ## 创建一个初始的HTML表单模板

  Create a new template file called `hero-form.component.html` and give it the following definition:
  
  创建一个新的模板文件，命名为`hero-form.component.html`，并且填写如下内容：

+makeExample('forms/ts/app/hero-form.component.html', 'start', 'app/hero-form.component.html')

:marked
  That is plain old HTML 5. We're presenting two of the `Hero` fields, `name` and `alterEgo`, and
  opening them up for user input in input boxes.
  
  这只是一段普通的旧式HTML 5代码。这里出现了两个`Hero`字段，`name`和`alterEgo`，并且开放它们，让用户可以在输入框中输入。

  The *Name* `<input>` control has the HTML5 `required` attribute;
  the *Alter Ego* `<input>` control does not because `alterEgo` is optional.
  
  *姓名Name* `<input>`控件具有HTML5的`required`属性；但 *Alter Ego* `<input>`控件没有，因为`alterEgo`字段是可选的。

  We've got a *Submit* button at the bottom with some classes on it.
  
  我们在底部有一个 *Submit* 按钮，它有一些CSS类。

  **We are not using Angular yet**. There are no bindings. No extra directives. Just layout.
  
  **我们还没有用到Angular** 。没有绑定。没有额外的指令。只做了个布局。

  The `container`,`form-group`, `form-control`, and `btn` classes 
  come from [Twitter Bootstrap](http://getbootstrap.com/css/). Purely cosmetic.
  We're using Bootstrap to gussy up our form.
  Hey, what's a form without a little style!
  
  `container`、`form-group`、`form-control`和`btn`类来自[Twitter Bootstrap](http://getbootstrap.com/css/)。纯粹是装饰。
  我们使用Bootstrap来打扮我们的表单。
  嘿，没有一点儿小个性的表单算个啥！

.callout.is-important
  header Angular Forms Do Not Require A Style Library
  header Angular表单不需要任何样式库
  :marked
    Angular makes no use of the `container`, `form-group`, `form-control`, and `btn` classes or
    the styles of any external library. Angular apps can use any CSS library
    ... or none at all.
    
    Angular不需要`container`、`form-group`、`form-control`和`btn`类，或者来自任何第三方库的任何样式，Angular应用可以使用任何CSS库 …… 或者啥也不用。

:marked
  Let's add the stylesheet.
  
  我们来添加样式表。

ol
  li Open a terminal window in the application root folder and enter the command:
  li 在应用的根目录下打开一个终端窗口，敲如下命令：
    code-example(language="html" escape="html").
      npm install bootstrap --save
  li Open <code>index.html</code> and add the following link to the <code>&lt;head></code>.
  li 打开<code>index.html</code>文件并且把下列链接添加到<code>&lt;head></code>中。
      +makeExample('forms/ts/index.html', 'bootstrap')(format=".")
:marked
.l-main-section
:marked
  ## Add Powers with ***ngFor**
  ## 用 ***ngFor*** 添加超能力
  Our hero may choose one super power from a fixed list of Agency-approved powers.
  We maintain that list internally (in `HeroFormComponent`).
  
  我们的英雄可以从经过职业介绍所认证过的固定列表中选择一项超能力。
  我们先在`HeroFormComponent`中内部维护这个列表。

  We'll add a `select` to our
  form and bind the options to the `powers` list using `NgFor`,
  a technique we might have seen before in the [Displaying Data](./displaying-data.html) chapter.
  
  我们将添加一个`select`到表单中，并且通过`NgFor`把`powers`列表绑定到候选项（options）。
  前面我们应该在[显示数据](./displaying-data.html)一章中见过`NgFor`。

  Add the following HTML *immediately below* the *Alter Ego* group.
  
  在 *Alter Ego* 的紧下方添加如下的HTML：
+makeExample('forms/ts/app/hero-form.component.html', 'powers', 'app/hero-form.component.html (节选)')(format=".")

:marked
  We are repeating the `<options>` tag for each power in the list of Powers.
  The `#p` local template variable is a different power in each iteration;
  we display its name using the interpolation syntax with the double-curly-braces.
  
  我们为列表中的每一项超能力重复渲染`<option>`标签。
  `#p`局部模板变量在每个迭代中都代表一个不同的超能力；我们使用双花括号中的插值表达式语法来显示它的名称。

<a id="ngModel"></a>
.l-main-section
:marked
  ## Two-way data binding with **ngModel**
  ## 使用 **ngModel** 进行双向数据绑定
  Running the app right now would be disappointing.
  
  现在就运行此应用将会失败。

figure.image-display
  img(src="/resources/images/devguide/forms/hero-form-3.png" width="400px" alt="没有数据绑定的早期表单")
:marked
  We don't see hero data because we are not binding to the `Hero` yet.
  We know how to do that from earlier chapters.
  [Displaying Data](./displaying-data.html) taught us Property Binding.
  [User Input](./user-input.html) showed us how to listen for DOM events with an
  Event Binding and how to update a component property with the displayed value.
  
  我们没有看到英雄的数据，因为我们还没有绑定到`Hero`。
  从以前的章节中，我们知道该怎么做。
  [显示数据](./displaying-data.html)教会我们属性绑定。
  [用户输入](./user-input.html)告诉我们如何通过事件绑定来监听DOM事件，以及如何用所显示的值更新组件的属性。

  Now we need to display, listen, and extract at the same time.
  
  现在，我们需要在同样的时机进行显示、监听和提取。

  We could use those techniques again in our form.
  Instead we'll introduce something new, the `[(ngModel)]` syntax, that
  makes binding our form to the model super-easy.
  
  我们可以再次在表单中使用这些技术。
  但我们也可以引入一些新东西 —— `[(ngModel)]`语法，它使用一种超级简单的方式把我们的表单绑定到模型。

  Find the `<input>` tag for the "Name" and update it like this
  
  找到“姓名”对应的`<input>`标签，并且像这样修改它：

+makeExample('forms/ts/app/hero-form.component.html', 'ngModel-1','app/hero-form.component.html (节选)')(format=".")

.l-sub-section
  :marked
    We appended a diagnostic interpolation after the input tag
    so we can see what we're doing.
    We left ourselves a note to throw it away when we're done.
    
    我们在input标签后添加一个诊断用的插值表达式，以便看清楚我们正在做什么。
    等做完之后，我们别忘了移除它。

:marked
  Focus on the binding syntax: `[(ngModel)]="..."`.
  
  重点在`[(ngModel)]="..."`语法上。

  If we ran the app right now and started typing in the *Name* input box,
  adding and deleting characters, we'd see them appearing and disappearing
  from the interpolated text.
  At some point it might look like this.
  
  如果我们现在运行这个应用，并且开始在 *姓名* 输入框中键入、添加和删除字符，我们将看到他们从插值结果中显示和消失。
  某一瞬间，它看起来可能是这样。
figure.image-display
  img(src="/resources/images/devguide/forms/ng-model-in-action.png" width="400px" alt="操作中的ngModel")
:marked
  The diagnostic is evidence that we really are flowing values from the input box to the model and
  back again. **That's two-way data binding!**
  
  诊断信息是一个证据，用来表明数据从输入框流动到模型，再反向流动回来的过程。 **这就是双向数据绑定** 

  Let's add similar `[(ngModel)]` bindings to *Alter Ego* and *Hero Power*.
  We'll ditch the input box binding message
  and add a new binding at the top to the component's `diagnostic` property.
  Then we can confirm that two-way data binding works *for the entire Hero model*.
  
  让我们用类似的方式添加`[(ngModel)]`到 *好基友* 和 *超能力* 属性。
  我们将抛弃输入框的绑定消息，并在组件顶部的`diagnostic`属性上添加一个新的绑定。
  然后我们能确认双向数据绑定 *在整个Hero模型上* 都是能工作的。

  After revision the core of our form should have three `[(ngModel)]` bindings that
  look much like this:
  
  修改了核心之后的表单有三个`[(ngModel)]`绑定，看起来像这样：

+makeExample('forms/ts/app/hero-form.component.html', 'ngModel-2', 'app/hero-form.component.html (节选)')

:marked
  If we ran the app right now and changed every Hero model property, the form might display like this:
  
  如果现在我们运行本应用，并且修改Hero模型的每一个属性，表单看起来像这样：
figure.image-display
  img(src="/resources/images/devguide/forms/ng-model-in-action-2.png" width="400px" alt="ngModel in super action")
:marked
  The diagnostic near the top of the form
  confirms that all of our changes are reflected in the model.
  
  表单顶部的诊断信息反映出了我们所做的一切更改。

  **Delete** the `{{diagnostic}}` binding at the top as it has served its purpose.
  
  表单顶部的`{{diagnostic}}`绑定表达式已经完成了它的使命， **删除** 它。

.l-sub-section
  :marked
    ### Inside [(ngModel)]
    ### [(ngModel)]内幕
    *This section is an optional deep dive into [(ngModel)]. Not interested? Skip ahead!*
    *本节是对[(ngModel)]的深入剖析，它是可选的。如果不感兴趣，那就放心大胆的跳过它。*
    
    The punctuation in the binding syntax, <span style="font-family:courier"><b>[()]</b></span>, is a good clue to what's going on.
    
    绑定语法中的<span style="font-family:courier"><b>[()]</b></span>是一个深入探索的优秀线索。

    In a Property Binding, a value flows from the model to a target property on screen.
    We identify that target property by surrounding its name in brackets, <span style="font-family:courier"><b>[]</b></span>.
    This is a one-way data binding **from the model to the view**.
    
    在属性绑定中，一个值从模型中传到屏幕上的目标属性。
    我们通过把名字括在方括号中来标记出目标属性，<span style="font-family:courier"><b>[]</b></span>。
    这是一个 **从模型到视图** 的单向数据绑定。

    In an Event Binding, we flow the value from the target property on screen to the model.
    We identify that target property by surrounding its name in parentheses, <span style="font-family:courier"><b>()</b></span>.
    This is a one-way data binding in the opposite direction **from the view to the model**.
    
    在事件绑定中，值从屏幕上的目标属性传到模型中。
    我们通过把名字括在圆括号中来标记出目标属性，<span style="font-family:courier"><b>()</b></span>。
    这是一个 **从视图到模型** 的反向单向数据绑定。

    No wonder Angular chose to combine the punctuation as <span style="font-family:courier"><b>[()]</b></span>
    to signify a two-way data binding and a **flow of data in both directions**.
    
    不出所料，Angular选择了组合标点 <span style="font-family:courier"><b>[()]</b></span> 来标记出双向数据绑定和双向数据流。

    In fact, we can break the `NgModel` binding into its two separate modes
    as we do in this re-write of the "Name" `<input>` binding:
    
    事实上，我们可以把`NgModel`绑定拆成两个独立的绑定，就像我们重写的“姓名”`<input>`绑定一样：
  +makeExample('forms/ts/app/hero-form.component.html', 'ngModel-3','app/hero-form.component.html (节选)')(format=".")

  :marked
    <br>The Property Binding should feel familiar. The Event Binding might seem strange.
    
    <br>这个属性绑定看起来有点熟。这个事件绑定看起来有点怪。

    The `ngModelChange` is not an `<input>` element event.
    It is actually an event property of the `NgModel` directive.
    When Angular sees a binding target in the form <span style="font-family:courier">[(x)]</span>,
    it expects the `x` directive to have an `x` input property and an `xChange` output property.
    
    `ngModelChange`不是一个`<input>`元素的事件。
    它实际上是一个来自`ngModel`指令的事件属性。
    当Angular在表单中看到一个<span style="font-family:courier">[(x)]</span>的绑定目标时，
    它会期待这个`x`指令有一个名为`x`的输入属性，和一个名为`xChange`的输出属性。

    The other oddity is the template expression, `model.name = $event`.
    We're used to seeing an `$event` object coming from a DOM event.
    The `ngModelChange` property doesn't produce a DOM event; it's an Angular `EventEmitter`
    property that returns the input box value when it fires &mdash; which is precisely what
    we should assign to the model's `name` property.
    
    模板表达式中的另一个古怪之处是`model.name = $event`。
    我们以前看到的$event变量是来自DOM事件的。
    但`ngModelChange`属性不处理DOM事件；它是一个Angular`EventEmitter`类型的属性，当它触发时，
    它返回的是输入框的值 —— 它恰好和我们希望赋给模型上`name`属性的值一样。

    Nice to know but is it practical? We almost always prefer `[(ngModel)]`.
    We might split the binding if we had to do something special in
    the event handling such as debounce or throttle the key strokes.
    
    很高兴知道这些，但现实中呢？实践上我们几乎总是优先使用 `[(ngModel)]` 形式的双向绑定。
    只有当我们不得不在事件处理函数中做一些特别的事情（比如合并或限制按键频率）时，才需要拆分出独立的事件处理函数。

    Learn more about `NgModel` and other template syntax in the
    [Template Syntax](./template-syntax.html) chapter.
    
    要学习更多关于`ngModel`和其它模板语法的知识，请参见
    [模板语法](./template-syntax.html)一章。

.l-main-section
:marked
  ## Track change-state and validity with **ngControl**
  ## 通过 **ngControl** 跟踪修改状态与有效性验证

  A form isn't just about data binding. We'd also like to know the state of the controls on our form.
  
  表单不仅是关于数据绑定的。我们还希望知道表单中各个控件的状态。

  By setting `ngControl` we create a directive that can tell if the user touched the control,
  if the value changed, or if the value became invalid.
  
  通过设置`ngControl`，我们创建了一个指令，它能告诉我们用户是否接触过此控件、它的值是否变化了，或者它的值是否变得无效了。

  This directive doesn't just track state; it updates the control with special
  Angular CSS classes from the set we listed above.
  We can leverage those class names to change the appearance of the
  control and make messages appear or disappear.
  
  这个指令不仅仅跟踪状态，它还会使用上面所列的特殊CSS类更新此控件。
  我们可以通过定制这些CSS类的样式来更改控件的外观，以及让消息被显示或隐藏。

  We'll explore those effects soon. Right now
  we should **add `ngControl` to all three form controls**,
  starting with the *Name* input box
  
  我们很快就会看到那些效果。现在，我们得先 **把`ngControl`添加到所有这三个表单控件中** ，就从 *姓名* 输入框开始吧：
+makeExample('forms/ts/app/hero-form.component.html', 'ngControl-1', 'app/hero-form.component.html (节选)')(format=".")
:marked
  We set this particular `ngControl` to "name" which makes sense for our app. Any unique value will do.
  
  对本应用来说，把这个`ngControl`设置为"name"会更容易理解。但也可以设置为任何值，只要它是唯一的。

.l-sub-section
  :marked
    Internally Angular creates `Controls` and registers them under their `ngControl` names
    with an `NgForm` directive that Angular attached to the `<form>` tag.
    We'll talk about `NgForm` [later in the chapter](#ngForm).
    
    Angular会在内部创建`Controls`，并以`ngControl`的值作为名字，注册到`NgForm`指令中，这个指令被Angular自动附加到了`<form>`标签上。
    我们将在[稍后的章节](#ngForm)中展开讨论`NgForm`。
    
    The `ngControl` *attribute* in our template actually maps to the 
    [NgControlName](../api/common/NgControlName-directive.html) directive.
    There is also a `NgControl` *abstract* directive which is *not the same thing*.
    We often ignore this technical distinction and refer to `NgControlName` more conveniently (albeit incorrectly) as the *NgControl* directive.
    
    我们模板中的这个`ngControl` *属性* 实际上被映射到了 [NgControlName](../api/common/NgControlName-directive.html)指令。
    虽然还有另一个叫`NgControl`的 *抽象* 指令，但和这个属性不是一回事。
    我们通常会忽略这点技术上的差异。为了更方便（尽管不正确），我们提起`NgControlName`时还是会把它叫做 *NgControl* 指令。
    
    While we're under the hood, we might as well note that the `ngModel` in the 
    two-way binding syntax is now a property of the `NgControlName` directive. 
    The `NgModel` directive is no longer involved. We only need one directive to manage the DOM element
    and there is no practical difference in the way either directive handles data binding.     
    
    既然我们已经来到了技术底层，我们可能还注意到了双向绑定语法中的`ngModel`实际上是`NgControlName`指令的一个属性。
    `NgModel`指令不再需要了。我们只需要一个指令来管理DOM元素就够了，而且这两个指令处理数据绑定时都没有实质性差异。

.l-main-section
:marked
  ## Add Custom CSS for Visual Feedback
  ## 添加自定义CSS以提供视觉反馈

  The *NgControl* directive doesn't just track state. 
  It updates the control with three classes that reflect the state.
  
  *NgControl* 指令不止跟踪状态。它还使用三个CSS类来更新控件，以便反映当前状态。
  
table
  tr
    th State<br/>状态
    th Class if true<br/>有此CSS类
    th Class if false<br/>无此CSS类
  tr
    td Control has been visited<br/>控件已经被访问过
    td <code>ng-touched</code>
    td <code>ng-untouched</code>
  tr
    td Control's value has changed<br/>控件值已经变化
    td <code>ng-dirty</code>
    td <code>ng-pristine</code>
  tr
    td Control's value is valid<br/>控件值是有效的
    td <code>ng-valid</code>
    td <code>ng-invalid</code>
:marked
  Let's add a temporary [local template variable](./template-syntax.html#local-vars) named **spy**
  to the "Name" `<input>` tag and use the spy to display those classes.
  
  我们往姓名`<input>`标签上添加一个名叫 **spy** 的临时[局部模板变量](./template-syntax.html#local-vars)，然后用这个spy来显示它上面的所有css类。

+makeExample('forms/ts/app/hero-form.component.html', 'ngControl-2','app/hero-form.component.html (节选)')(format=".")

:marked
  Now run the app and focus on the *Name* input box.
  Follow the next four steps *precisely*
  
  现在，运行本应用，并且让 *姓名* 输入框获得焦点。
  并严格按照下面四个步骤来做：

  1. Look but don't touch
  1. 查看输入框，但别碰它
  1. Click in the input box, then click outside the text input box
  1. 点击输入框，然后点击输入框外面
  1. Add slashes to the end of the name
  1. 在名字的末尾添加一个斜杠
  1. Erase the name
  1. 删除名字

  The actions and effects are as follows:
  
  动作和它对应的效果如下：
figure.image-display
  img(src="/resources/images/devguide/forms/control-state-transitions-anim.gif"  alt="控件状态转换")
:marked
  We should be able to see the following four sets of class names and their transitions:
  
  我们应该能看到下列四组类名和它们的变化：
figure.image-display
  img(src="/resources/images/devguide/forms/ng-control-class-changes.png" width="400px" alt="控件状态转换")

:marked
  The (`ng-valid` | `ng-invalid`) pair are most interesting to us. We want to send a
  strong visual signal when the data are invalid and we want to mark required fields.
  
  (`ng-valid` | `ng-invalid`)这一对儿是我们最感兴趣的。当数据变得无效时，我们希望发出一个强力的视觉信号。我们还希望标记出必填字段。

  We realize we can do both at the same time with a colored bar on the left of the input box:
  
  我们意识到其实能同时满足这两个要求，只要在输入框的左侧添加一个带颜色的竖条就可以了。

figure.image-display
  img(src="/resources/images/devguide/forms/validity-required-indicator.png" width="400px" alt="无效表单")

:marked
  We achieve this effect by adding two styles to a new `forms.css` file
  that we add to our project as a sibling to `index.html`.
  
  通过添加两个样式定义到新的`forms.css`文件中，我们达到了预期效果。这个文件我们要添加到项目中，和`index.html`同级。

+makeExample('forms/ts/forms.css',null,'forms.css')(format=".")
:marked
  These styles select for the two Angular validity classes and the HTML 5 "required" attribute.
  
  这些样式的选择器是这两个Angular有效性类和HTML5的“required”属性。

  We update the `<head>` of the `index.html` to include this style sheet.
  
  我们更新`index.html`中的`<head>`标签来包含这个样式表。
+makeExample('forms/ts/index.html', 'styles', 'index.html (节选)')(format=".")
:marked
  ## Show and Hide Validation Error messages
  ## 显示和隐藏有效性校验的错误信息

  We can do better.
  
  我们能做的更好。

  The "Name" input box is required. Clearing it turns the bar red. That says *something* is wrong but we
  don't know *what* is wrong or what to do about it.
  We can leverage the `ng-invalid` class to reveal a helpful message.
  
  姓名输入框是必填的，清空它会让左侧的条变红。这表示 *某些东西* 是错的，但我们不知道错在哪里，或者如何纠正。
  我们可以借助`ng-invalid`类来给出一个更有用的消息。

  Here's the way it should look when the user deletes the name:
  
  当用户删除姓名时，显示方式应该是这样的：
figure.image-display
  img(src="/resources/images/devguide/forms/name-required-error.png" width="400px" alt="必须填写姓名")

:marked
  To achieve this effect we extend the `<input>` tag with
  
  要达到这个效果，我们得通过下列方式扩展`<input>`标签：
  1. a [local template variable](./template-syntax.html#local-vars)
  1. 一个[局部模板变量](./template-syntax.html#local-vars)
  1. the "*is required*" message in a nearby `<div>` which we'll display only if the control is invalid.
  1. “本项必须填写”的消息放在附近的一个`<div>`元素中，只有当控件无效时，我们才显示它。

  Here's how we do it for the *name* input box:
  
  下面是我们应该对 *姓名* 输入框所要做的：
+makeExample('forms/ts/app/hero-form.component.html', 
  'name-with-error-msg', 
  'app/hero-form.component.html (节选)')(format=".")
:marked
  We need a template local variable to access the input box's Angular control from within the template.
  Here we created a variable called `name` and gave it the value "ngForm".
  
  我们需要一个局部模板变量来访问模板中输入框的Angular控件。
  这里，我们创建了一个名叫`name`的变量，并且把它赋值为"ngForm"。
.l-sub-section
  :marked
    Why "ngForm"? 
    A directive's [exportAs](../api/core/DirectiveMetadata-class.html#!#exportAs) property 
    tells Angular how to link local variable to the directive.
    We set `name` to `ngForm` because the `NgControlName` directive's `exportAs` property happens to be "ngForm".
    
    为什么是"ngForm"？
    指令的[exportAs](../api/core/DirectiveMetadata-class.html#!#exportAs)属性告诉Angular如何把局部变量链接到指令中。
    这里我们把`name`设置为`ngForm`就是因为`NgControlName`指令的`exportAs`属性设置为了“ngForm”。
    
    This seems unintuitive at first until we realize that *all* control directives in the 
    Angular form family &mdash; including `NgForm`, `NgModel`, `NgControlName` and `NgControlGroup` &mdash; *exportAs* "ngForm"
    and we only ever apply *one* of these directives to an element tag.
    Consistency rules!
    
    起初这看起来不直观，直到我们发现Angular表单一族的 *所有* 控件指令 —— 包括`NgForm`、`NgModel`、`NgControlName`和`NgControlGroup` —— 都 
    *exportAs* 了 “ngForm”，
    原来我们刚才不过是把这些指令 *之一* 用在了一个元素标签上。
    一致性统治一切！

  Now we can control visibility of the "name" error message by binding properties of the `name` control to the message `<div>` element's `hidden` property.
  
  现在，通过把用于显示消息的 `div` 元素的`hidden`属性绑定到`name`控件的这些属性，我们就可以控制“姓名”字段错误信息的可见性了。
+makeExample('forms/ts/app/hero-form.component.html', 
  'hidden-error-msg', 
  'app/hero-form.component.html (节选)')
:marked
  In this example, we hide the message when the control is valid or pristine; 
  pristine means the user hasn't changed the value since it was displayed in this form. 
  
  这个范例中，当控件是有效或全新(pristine)的时，我们要隐藏消息；全新意味着从它被显示在表单中开始，用户还从未修改过它的值。
  
  This user experience is the developer's choice. Some folks want to see the message at all times.
  If we ignore the `pristine` state, we would hide the message only when the value is valid.
  If we arrive in this component with a new (blank) hero or an invalid hero, 
  we'll see the error message immediately, before we've done anything.
  
  这种用户体验取决于开发人员的选择。有些人希望任何时候都显示这条消息。
  如果我们忽略了`pristine`状态，我们就会只在值有效时隐藏此消息。
  如果往这个组件传入了一个全新（空白）的英雄，或者一个无效的英雄，我们将立刻看到错误信息 —— 虽然我们还啥也没做。
   
  Some folks find that behavior disconcerting. They only want to see the message when the user makes an invalid change.
  Hiding the message while the control is "pristine" achieves that goal.
  We'll see the significance of this choice when we [add a new hero](#new-hero) to the form.
  
  有些人会为这种行为感到不安。他们希望只有在用户做出一个无效的更改时才显示这个消息。如果当控件是全新的时也隐藏消息就能达到这个目标。
  我们将在往表单中[添加一个新英雄](#new-hero)时看到这种选择的重要性。

  The Hero *Alter Ego* is optional so we can leave that be.
  
  英雄的 *另一面* 是可选项，所以我们不填它。

  Hero *Power* selection is required.
  We can add the same kind of error handling to the `<select>` if we  want
  but it's not imperative because the selection box already constrains the
  power to valid value.
  
  英雄的 *超能力* 选项是必填的。
  可以往`<select>`上添加相同的错误处理，只要我们希望如此。
  但是这没有那么迫切，因为这个选择框已经把“超能力”约束成了有效值。
  
<a id="new-hero"></a>
<a id="reset"></a>  
.l-main-section
:marked
  ## Add a hero and reset the form
  ## 添加一个英雄，并且重置表单
  We'd like to add a new hero in this form. 
  We place a "New Hero" button at the bottom of the form and bind its click event to a component method.
  
  我们希望在这个表单中添加一个新的英雄。
  我们在表单的底部放一个“新增英雄”按钮，并且把它的click事件绑定到一个组件方法上。
+makeExample('forms/ts/app/hero-form.component.html', 
  'new-hero-button', 
  'app/hero-form.component.html (新增英雄按钮)')
:marked
+makeExample('forms/ts/app/hero-form.component.ts', 
  'new-hero-v1', 
  'app/hero-form.component.ts (新增英雄方法 - v1)')(format=".")
:marked
  Run the application again, click the *New Hero* button, and the form clears.
  The *required* bars to the left of the input box are red, indicating invalid `name` and `power` properties.
  That's understandable as these are required fields. 
  The error messages are hidden because the form is pristine; we haven't changed anything yet.
  
  再次运行应用，点击 *新增英雄* 按钮，表单被清空了。
  输入框左侧的 *必填项* 竖条是红色的，表示`name`和`power`属性是无效的。
  对三个必填字段来说，这种方式清晰易懂。
  错误信息是隐藏的，这是因为表单还是全新的，我们还没有修改任何东西。
  
  Enter a name and click *New Hero* again.
  This time we see an error message! Why? We don't want that when we display a new (empty) hero.
  
  输入一个名字，并且再次点击 *新增英雄* 按钮。
  这次，我们看到了错误信息！为什么？当我们显示一个新（空白）的英雄时，我们不希望如此。
  
  Inspecting the element in the browser tools reveals that the *name* input box is no longer pristine.
  Replacing the hero *did not restore the pristine state* of the control.
  
  使用浏览器工具审查这个元素就会发现，这个 *姓名* 输入框并不是全新的。
  更换了英雄 *并不会重置控件的“全新”状态* 。
.l-sub-section
  :marked
    Upon reflection, we realize that Angular cannot distinguish between
    replacing the entire hero and clearing the `name` property programmatically.
    Angular makes no assumptions and leaves the control in its current, dirty state.
:marked
  We'll have to reset the form controls manually with a small trick. 
  We add an `active` flag to the component, initialized to `true`. When we add a new hero,
  we toggle `active` false and then immediately back to true with a quick `setTimeout`.
+makeExample('forms/ts/app/hero-form.component.ts', 
  'new-hero', 
  'app/hero-form.component.ts (New Hero method - final)')(format=".")
:marked
  Then we bind the form element to this `active` flag.
+makeExample('forms/ts/app/hero-form.component.html', 
  'form-active', 
  'app/hero-form.component.html (Form tag)')
:marked
  With `NgIf` bound to the `active` flag, 
  clicking "New Hero" removes the form from the DOM and recreates it in a blink of an eye.
  The re-created form is in a pristine state. The error message is hidden.
.l-sub-section
  :marked
    This is a temporary workaround while we await a proper form reset feature.
:marked
  
.l-main-section
:marked
  ## Submit the form with **ngSubmit**
  The user should be able to submit this form after filling it in.
  The Submit button at the bottom of the form
  does nothing on its own but it will
  trigger a form submit because of its type (`type="submit"`).

  A "form submit" is useless at the moment.
  To make it useful, we'll update the `<form>` tag with another Angular directive, `NgSubmit`,
  and bind it to the `HeroFormComponent.submit()` method with an  event binding
+makeExample('forms/ts/app/hero-form.component.html', 'ngSubmit')(format=".")

:marked
  We slipped in something extra there at the end!  We defined a
  template local variable, **`#heroForm`**, and initialized it with the value, "ngForm".

  The variable `heroForm` is now a reference to the `NgForm` directive that governs the form as a whole.
<a id="ngForm"></a>
.l-sub-section
  :marked
    ### The NgForm directive
    What `NgForm` directive? We didn't add an [NgForm](../api/common/NgForm-directive.html) directive!
    
    Angular did. Angular creates and attaches an `NgForm` directive to the `<form>` tag automatically.

    The `NgForm` directive  supplements the `form` element with additional features.
    It holds the controls we created for the elements with `ngControl` attributes
    and monitors their properties including their validity.
    It also has its own `valid` property which is true only *if every contained
    control* is valid.
    
:marked
  Later in the template we bind the button's `disabled` property to the form's over-all validity via
  the `heroForm` variable. Here's that bit of markup:
+makeExample('forms/ts/app/hero-form.component.html', 'submit-button')
:marked
  Re-run the application. The form opens in a valid state and the button is enabled.

  Now delete the *Name*. We violate the "name required" rule which
  is duely noted in our error message as before. And now the Submit button is also disabled.

  Not impressed?  Think about it for a moment. What would we have to do to
  wire the button's enable/disabled state to the form's validity without Angular's help?

  For us, it was as simple as
  1. Define a template local variable on the (enhanced) form element
  2. Reference that variable in a button some 50 lines away.

.l-main-section
:marked
  ## Toggle two form regions (extra credit)
  Submitting the form isn't terribly dramatic at the moment.
.l-sub-section
  :marked
    An unsurprising observation for a demo. To be honest,
    jazzing it up won't teach us anything new about forms.
    But this is an opportunity to exercise some of our newly won
    binding skills.
    If you're not interested, you can skip to the chapter's conclusion
    and not miss a thing.
:marked
  Let's do something more strikingly visual.
  Let's hide the data entry area and display something else.

  Start by wrapping the form in a `<div>` and bind
  its `hidden` property to the `HeroFormComponent.submitted` property.

+makeExample('forms/ts/app/hero-form.component.html', 'edit-div', 'app/hero-form.component.html (excerpt)')(format=".")

:marked
  The main form is visible from the start because the
  the `submitted` property is false until we submit the form,
  as this fragment from the `HeroFormComponent` reminds us:

+makeExample('forms/ts/app/hero-form.component.ts', 'submitted')(format=".")

:marked
  When we click the Submit button, the `submitted` flag becomes true and the form disappears
  as planned.

  Now we need to show something else while the form is in the submitted state.
  Add the following block of HTML below the `<div>` wrapper we just wrote:
+makeExample('forms/ts/app/hero-form.component.html', 'submitted', 'app/hero-form.component.html (excerpt)')

:marked
  There's our hero again, displayed read-only with interpolation bindings.
  This slug of HTML only appears while the component is in the submitted state.

  We added an Edit button whose click event is bound to an expression
  that clears the `submitted` flag.

  When we click it, this block disappears and the editable form reappears.

  That's as much drama as we can muster for now.

.l-main-section
:marked
  ## Conclusion

  The Angular 2 form discussed in this chapter takes advantage of the following framework features to provide support for data modification, validation and more:

  - An Angular HTML form template.
  - A form component class with a `Component` decorator.
  - The `ngSubmit` directive for handling the form submission.
  - Template local variables such as `#heroForm`, `#name`, `#alter-ego` and `#power`.
  - The `[(ngModel)]` syntax for two-way data binding.
  - The `ngControlName` directive for validation and form element change tracking.
  - The local variable’s `valid` property on input controls to check if a control is valid and show/hide error messages.
  - Controlling the submit button's enabled state by binding to `NgForm` validity.
  - Custom CSS classes that provide visual feedback to users about invalid controls.

  Our final project folder structure should look like this:
.filetree
  .file angular2-forms
  .children
    .file app
    .children
      .file app.component.ts
      .file hero.ts
      .file hero-form.component.html
      .file hero-form.component.ts
      .file main.ts
    .file node_modules ...
    .file typings ...      
    .file index.html
    .file package.json
    .file tsconfig.json
    .file typings.json
:marked
  Here’s the final version of the source:

+makeTabs(
  `forms/ts/app/hero-form.component.ts,
   forms/ts/app/hero-form.component.html,
   forms/ts/app/hero.ts,
   forms/ts/app/app.component.ts,
   forms/ts/app/main.ts,   
   forms/ts/index.html,
   forms/ts/forms.css`,
  'final, final,,,,,',
  `hero-form.component.ts,
   hero-form.component.html,   
   hero.ts,
   app.component.ts,
   main.ts,
   index.html,
   forms.css`)
:marked