From 2b3c8e5a64a5cb494cfeeac142b9ca6cb4c9b4da Mon Sep 17 00:00:00 2001
From: Yang Lin <todoubaba@gmail.com>
Date: Sat, 26 Nov 2016 03:16:06 +0800
Subject: [PATCH] Polish forms.jade

---
 public/docs/ts/latest/guide/forms.jade | 439 +++++++++++++------------
 public/resources/css/_translate.scss   |   5 +-
 2 files changed, 229 insertions(+), 215 deletions(-)

diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade
index 67054a4df9..1e220a584e 100644
--- a/public/docs/ts/latest/guide/forms.jade
+++ b/public/docs/ts/latest/guide/forms.jade
@@ -5,15 +5,15 @@ include ../_util-fns
   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。
-  但是，要想做出一个优秀的表单，让它具有贴心的数据输入体验，以指导用户明晰、高效的通过表单完成背后的工作流程，这个挑战就大多了。
+  任何经验丰富的Web开发人员都能使用适当的标签拼凑出一个HTML表单。
+  但是，要想做出一个具有贴心的数据输入体验的表单，
+  引导用户明晰、高效地完成表单背后的工作流程，这个挑战就大多了。
 
   *That* takes design skills that are, to be frank, well out of scope for this chapter.
 
@@ -40,7 +40,7 @@ include ../_util-fns
 
   - track the change state and validity of form controls using `ngModel` in combination with a form
 
-  - 结合表单来使用`ngModel`，能让我们跟踪状态的变化并对表单控件做验证
+  - 结合表单来使用`ngModel`，我们可以跟踪表单控件的状态变化和有效性
 
   - provide strong visual feedback using special CSS classes that track the state of the controls
 
@@ -48,11 +48,11 @@ include ../_util-fns
 
   - display validation errors to users and enable/disable form controls
 
-  - 向用户显示有效性验证的错误提示，以及禁用/启用表单控件
+  - 向用户显示有效性验证的错误提示，以及启用/禁用表单控件
 
   - use [template reference variables](./template-syntax.html#ref-vars) for sharing information among HTML elements
 
-  - 通过模板引用变量，在控件之间共享信息
+  - 使用[模板引用变量](./template-syntax.html#ref-vars)，在HTML元素之间共享信息
 
   Run the <live-example></live-example>.
 
@@ -67,7 +67,7 @@ include ../_util-fns
   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)来构建表单。
+  通常，我们用Angular[模板语法](./template-syntax.html)编写模板，结合本章所描述的表单专用指令和技术来构建表单。
 
 .l-sub-section
   :marked
@@ -80,13 +80,14 @@ include ../_util-fns
   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模板，我们可以构建几乎所有表单 —— 登录表单、联系人表单…… 大量的各种商务表单。
-  我们可以创造性的摆放各种控件、把它们绑定到数据、指定校验规则、显示校验错误、有条件的禁用/启用特定的控件、触发内置的视觉反馈等等，不胜枚举。
+  利用Angular模板，我们可以构建几乎所有表单 —— 登录表单、联系人表单…… 以及任何的商务表单。
+  我们可以创造性的摆放各种控件、把它们绑定到数据、指定校验规则、显示校验错误、有条件的禁用或
+  启用特定的控件、触发内置的视觉反馈等等，不胜枚举。
 
   It will be pretty easy because Angular handles many of the repetitive, boiler plate tasks we'd
   otherwise wrestle with ourselves.
 
-  它的确很简单，这是因为Angular帮我们处理了大多数重复、单调的任务，这让我们可以不必亲自操刀、身陷其中。
+  它用起来很简单，这是因为Angular帮我们处理了大多数重复、单调的任务，这让我们可以不必亲自操刀、身陷其中。
 
   We'll discuss and learn to build the following template-driven form:
 
@@ -99,11 +100,11 @@ figure.image-display
   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:
 
@@ -129,39 +130,39 @@ figure.image-display
 
   1. Create the `Hero` model class
 
-  1. 创建`Hero`模型类
+     创建`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`双向数据绑定语法把数据属性绑定到每个表单输入控件
+     使用`ngModel`双向数据绑定语法把数据属性绑定到每个表单输入控件
 
   1. Add the `name` attribute to each form input control
 
-  1. 往每个表单输入控件上添加`name`属性(Attribute)
+     往每个表单输入控件上添加`name`属性 (attribute)
 
   1. Add custom CSS to provide visual feedback
 
-  1. 添加自定义CSS来提供视觉反馈
+     添加自定义 CSS 来提供视觉反馈
 
   1. Show and hide validation error messages
 
-  1. 显示和隐藏有效性验证的错误信息
+     显示和隐藏有效性验证的错误信息
 
   1. Handle form submission with **ngSubmit**
 
-  1. 使用**ngSubmit**处理表单提交
+     使用**ngSubmit**处理表单提交
 
   1. Disable the form’s submit button until the form is valid
 
-  1. 禁用此表单的提交按钮，直到表单变为有效
+     禁用此表单的提交按钮，直到表单变为有效
 
 :marked
   ## Setup
@@ -170,7 +171,7 @@ figure.image-display
 
   Create a new project folder (`angular-forms`) and follow the steps in the [QuickStart](../quickstart.html).
 
-  创建一个新的项目文件夹(`angular-forms`)，并且完成[“快速起步”](../quickstart.html)中的步骤。
+  创建一个新的项目文件夹 (`angular-forms`)，并且完成[“快速起步”](../quickstart.html)中的步骤。
 
 include ../_quickstart_repo
 :marked
@@ -181,15 +182,15 @@ include ../_quickstart_repo
   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`，译注：中文含义：第二人格，比如X战警中的Jean/黑凤凰)。
+  这里使用三个必备字段 (`id`、`name`、`power`)，和一个可选字段 (`alterEgo`，译注：中文含义：第二人格，比如X战警中的Jean/黑凤凰)。
 
   Create a new file in the app folder called `hero.ts` and give it the following class definition:
 
@@ -205,11 +206,11 @@ include ../_quickstart_repo
   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`的参数创建一个公有字段，并在创建新的英雄实例时，把参数值自动赋给这些公有字段。
+  TypeScript 编译器为每个`public`构造函数参数生成一个公共字段，在创建新的英雄实例时，自动把参数值赋给这些公共字段。
 
   The `alterEgo` is optional and the constructor lets us omit it; note the (?) in `alterEgo?`.
 
-  `alterEgo`是可选的，构造函数允许我们省略它，注意`alterEgo?`中的问号(?)。
+  `alterEgo`是可选的，构造函数允许我们省略它，注意`alterEgo?`中的问号 (?)。
 
   We can create a new hero like this:
 
@@ -229,7 +230,7 @@ code-example(format="").
 
   An Angular form has two parts: an HTML-based template and a code-based Component to handle data and user interactions.
 
-  每个Angular表单分为两部分：一个基于HTML的模板，和一个基于代码的组件，它用来处理数据和用户交互。
+  每个Angular表单分为两部分：基于HTML的模板和基于代码的组件。组件用来处理数据和用户交互。
 
   We begin with the Component because it states, in brief, what the Hero editor can do.
 
@@ -244,52 +245,52 @@ code-example(format="").
 :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 concepts we’ve learned in previous chapters
 
-  只需要用到前面章节中已经学过的那些概念，就可以完全理解这个组件：
+  只需要前面章节中学过的概念，就可以完全理解这个组件：
 
   1. We import the `Component` decorator from the Angular library as we usually do.
 
-  1. 像往常一样，我们从Angular库中导入`Component`装饰器。
+     像往常一样，我们从 Angular 库中导入`Component`装饰器。
 
   1. We import the `Hero` model we just created.
 
-  1. 导入刚刚创建的`Hero`模型
+     导入刚刚创建的`Hero`模型。
 
   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>`标签，把此表单扔进父模板中。
+     `@Component`选择器"hero-form"表示可以用`<hero-form>`标签把这个表单放进父模板。
 
   1. The `moduleId: module.id` property sets the base for module-relative loading of the `templateUrl`.
 
-  1. `moduleId: module.id`属性设置了以相对于模块的路径加载`templateUrl`时使用的基地址。
+     `moduleId: module.id`属性设置了基地址，用于从相对模块路径加载`templateUrl`。
 
   1. The `templateUrl` property points to a separate file for the template HTML called `hero-form.component.html`.
 
-  1. `templateUrl`属性指向一个独立的HTML模板文件，名叫`hero-form.component.html`。
+     `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)，以绑定到父组件上。
-  我们目前不关心这些，因为将来这些变化不会影响到我们的表单。
+     为`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形式。
-  它会帮我们看清开发过程中发生的事，等最后做清理时我们会丢弃它。
+     我们在最后增加一个`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
@@ -297,32 +298,32 @@ code-example(format="").
   We also like short files with a clear and obvious purpose like this one.
 
   没有什么答案在所有场合都总是“正确”的。当内联模板足够短的时候，我们更喜欢用它。
-  但大多数的表单模板都不短。普遍来讲，TypeScript和JavaScript文件不是写大型HTML的好地方(也不好读)。
-  而且没有几个编辑器能对混写的HTML和代码提供足够的帮助。
-  我们还是喜欢写成像这个一样清晰明确的短文件。
+  但大多数的表单模板都不短。通常，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.module.ts` and `app.component.ts` to make use of our new `HeroFormComponent`.
 
-  把HTML模板放在别处是一个好的选择。
-  我们一会儿就去写那个模板。在这之前，我们先回来修改`app.module.ts`和`app.component.ts`文件，来让它用上我们新的`HeroFormComponent`组件。
+  把 HTML 模板放在其它地方是个不错的选择。等会儿就去写那个模板。
+  在这之前，先回来修改`app.module.ts`和`app.component.ts`文件，用上新写的`HeroFormComponent`组件。
 
 .l-main-section
 :marked
   ## Revise the *app.module.ts*
 
-  ## 修改 *app.module.ts**
+  ## 修改 *app.module.ts*
 
   `app.module.ts` defines the application's root module. In it we identify the external modules we'll use in our application
   and declare the components that belong to this module, such as our `HeroFormComponent`.
 
-  `app.module.ts`定义了应用的根模块。在那里，我们指出了即将用到的外部模块，并且声明了属于本模块中的组件，比如`HeroFormComponent`。
+  `app.module.ts`定义了应用的根模块。其中标识即将用到的外部模块，以及声明属于本模块中的组件，如`HeroFormComponent`。
 
   Because template-driven forms are in their own module, we need to add the `FormsModule` to the array of
   `imports` for our application module before we can use forms.
 
-  因为模板驱动的表单有它们自己的模块，所以我们得把`FormsModule`添加到本应用的`imports`数组中，这样我们才能使用表单。
+  因为模板驱动的表单位于它们自己的模块，所以在使用表单之前，需要将`FormsModule`添加到应用模块的`imports`数组中。
 
   Replace the contents of the "QuickStart" version with the following:
 
@@ -338,35 +339,35 @@ code-example(format="").
 
     1. We import `FormsModule` and our new `HeroFormComponent`.
 
-    1. 我们导入了`FormsModule`以及新组件`HeroFormComponent`。
+       导入`FormsModule`和新组件`HeroFormComponent`。
 
     1. We add the `FormsModule` to the list of `imports` defined in the `ngModule` decorator. This gives our application
     access to all of the template-driven forms features, including `ngModel`.
 
-    1. 我们把`FormsModule`添加到`ngModule`装饰器的`imports`列表中。这会让我们的应用能使用模板驱动表单的所有特性，包括`ngModel`。
+       把`FormsModule`添加到`ngModule`装饰器的`imports`列表中。使应用能访问模板驱动表单的所有特性，包括`ngModel`。
 
     1. We add the `HeroFormComponent` to the list of `declarations` defined in the `ngModule` decorator. This makes
     the `HeroFormComponent` component visible throughout this module.
 
-    1. 我们把`HeroFormComponent`添加到`ngModule`装饰器的`declarations`列表中。这让`HeroFormComponent`组件在本模块中随处都可访问。
+       把`HeroFormComponent`添加到`ngModule`装饰器的`declarations`列表中。使`HeroFormComponent`组件在整个模块中可见。
 
 .alert.is-important
   :marked
     If a component, directive, or pipe belongs to a module in the `imports` array, ​_DON'T_​ declare it in the `declarations` array.
     If you wrote it and it should belong to this module, ​_DO_​ declare it in the `declarations` array.
 
-    如果一个组件、指令或管道出现在模块的`imports`数组中，就说明它是外来模块，_不要_再到`declarations`数组中声明它们。
-    如果你自己写的它，并且它属于当前模块，_就要_把它声明在`declarations`数组中。
+    如果一个组件、指令或管道出现在模块的`imports`数组中，_不要_把它声明在`declarations`数组中。
+    如果它是你自己写的，并且属于当前模块，_就要_把它声明在`declarations`数组中。
 
 .l-main-section
 :marked
   ## Revise the *app.component.ts*
 
-  ## 修改*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`将被放在其中。
+  `app.component.ts`是本应用的根组件，`HeroFormComponent`将被放在其中。
 
   Replace the contents of the "QuickStart" version with the following:
 
@@ -383,18 +384,17 @@ code-example(format="").
     1. The `template` is simply the new element tag identified by the component's `selector` property.
     This will display the hero form when the application component is loaded.
 
-    1. 直接把`template`的内容改成`HeroFormComponent`的`selector`属性中指定的新元素标签。
-    于是当应用组件被加载时，将显示这个英雄表单。
+    1. `template`中只有新元素标签，即组件的`selector`属性。当应用组件被加载时，将显示这个英雄表单。
 
 .l-main-section
 :marked
   ## Create an initial HTML Form Template
 
-  ## 创建一个初始HTML表单模板
+  ## 创建一个初始 HTML 表单模板
 
   Create a new template file called `hero-form.component.html` and give it the following definition:
 
-  创建一个新的模板文件，命名为`hero-form.component.html`，并且填写如下内容：
+  新建模板文件，命名为`hero-form.component.html`，并且填写如下内容：
 
 +makeExample('forms/ts/app/hero-form.component.html', 'start', 'app/hero-form.component.html')
 
@@ -402,41 +402,42 @@ code-example(format="").
   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`，让用户可以在输入框中输入，修改它们。
+  这只是一段普通的旧式 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`字段是可选的。
+  *Name* `<input>`控件具有 HTML5 的`required`属性；但 *Alter Ego* `<input>`控件没有，因为`alterEgo`字段是可选的。
 
   We've got a *Submit* button at the bottom with some classes on it for styling.
 
-  我们在底部有一个*Submit*按钮，它有一些用来添加样式的CSS类。
+  我们在底部有一个 *Submit* 按钮，它有一些 CSS 样式类。
 
   **We are not using Angular yet**. There are no bindings. No extra directives. Just layout.
 
-  **我们还没有用到Angular**。没有绑定。没有额外的指令。只做了个布局。
+  **我们还没有用到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来打扮我们的表单。
+  `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表单不需要任何样式库
+  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库 …… 或者啥都不用。
+    Angular 不需要`container`、`form-group`、`form-control`和`btn`类，
+    或者外部库的任何样式。Angular 应用可以使用任何 CSS 库…… ，或者啥都不用。
 
 :marked
   Let's add the stylesheet.
@@ -444,38 +445,43 @@ code-example(format="").
   我们来添加样式表。
 
 ol
-  li Open a terminal window in the application root folder and enter the command:
+  li
+    p Open a terminal window in the application root folder and enter the command:
+
+    p 在应用的根目录下打开一个终端窗口，敲如下命令：
 
-  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=".")
+  li
+    p Open <code>index.html</code> and add the following link to the <code>&lt;head></code>.
+
+    p 打开<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***添加超能力
+  ## 用 ***ngFor*** 添加超能力
 
   Our hero may choose one super power from a fixed list of Agency-approved powers.
   We maintain that list internally (in `HeroFormComponent`).
 
-  我们的英雄可以从由英雄管理局认证过的固定列表中选择一项超能力。
-  我们先在`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`列表绑定到`option`中。
+  在表单中添加`select`，用`ngFor`把`powers`列表绑定到列表选项。
   前面我们应该在[显示数据](./displaying-data.html)一章中见过`ngFor`。
 
   Add the following HTML *immediately below* the *Alter Ego* group.
 
-  在*Alter Ego*的紧下方添加如下HTML：
+  在 *Alter Ego* 的紧下方添加如下 HTML：
 +makeExample('forms/ts/app/hero-form.component.html', 'powers', 'app/hero-form.component.html (excerpt)')(format=".")
 
 :marked
@@ -484,14 +490,14 @@ ol
   we display its name using the interpolation syntax with the double-curly-braces.
 
   我们为列表中的每一项超能力渲染出一个`<option>`标签。
-  模板输入变量`p`在每个迭代中都代表一个不同的超能力，我们使用双花括号插值表达式语法来显示它的名称。
+  模板输入变量`p`在每个迭代指向一个不同的超能力，使用双花括号插值表达式语法来显示它的名称。
 
 <a id="ngModel"></a>
 .l-main-section
 :marked
   ## Two-way data binding with **ngModel**
 
-  ## 使用**ngModel**进行双向数据绑定
+  ## 使用 **ngModel** 进行双向数据绑定
 
   Running the app right now would be disappointing.
 
@@ -506,21 +512,21 @@ figure.image-display
   [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事件，以及如何用所显示的值更新组件的属性。
+  因为还没有绑定到某个英雄，所以看不到任何数据。
+  解决方案见前面的章节。
+  [显示数据](./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)]`语法，它使用一种超简单的方式把我们的表单绑定到模型。
+  但是，这里将介绍个新东西 —— `[(ngModel)]`语法，使表单绑定到模型的工作变得超级简单。
 
   Find the `<input>` tag for the "Name" and update it like this
 
@@ -534,8 +540,8 @@ figure.image-display
     so we can see what we're doing.
     We left ourselves a note to throw it away when we're done.
 
-    我们在input标签后添加一个诊断用的插值表达式，以看清正在发生什么事。
-    我们给自己留下了一个备注，提醒我们完成后移除它。
+    在 input 标签后添加用于诊断的插值表达式，以看清正在发生什么事。
+    给自己留个备注，提醒我们完成后移除它。
 
 :marked
   Focus on the binding syntax: `[(ngModel)]="..."`.
@@ -547,7 +553,7 @@ figure.image-display
   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")
@@ -555,13 +561,14 @@ figure.image-display
   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!**
 
-  诊断信息是一个证据，用来表明数据从输入框流动到模型，再反向流动回来的过程。**这就是双向数据绑定！**
+  诊断信息是一个证据，表明数据确实从输入框流动到模型，再反向流动回来。**这就是双向数据绑定！**
 
   Notice that we also added a `name` attribute to our `<input>` tag and set it to "name"
   which makes sense for the hero's name. Any unique value will do, but using a descriptive name is helpful.
   Defining a `name` attribute is a requirement when using `[(ngModel)]` in combination with a form.
 
-  注意，我们还往`<input>`标签上添加了一个`name`属性(Attribute)并且把它设置为"name"，这表示英雄的名字。使用任何唯一的值都可以，但使用具有描述性的名字会更有帮助。
+  注意，`<input>`标签还添加了`name`属性 (attribute)，并设置为"name"，表示英雄的名字。
+  使用任何唯一的值都可以，但使用具有描述性的名字会更有帮助。
   当在表单中使用`[(ngModel)]`时，必须要定义`name`属性。
 
 .l-sub-section
@@ -570,7 +577,8 @@ figure.image-display
     attached to the `<form>` tag. Each `FormControl` is registered under the name we assigned to the `name` attribute.
     We'll talk about `NgForm` [later in this chapter](#ngForm).
 
-    在内部，Angular创建`FormControls`并将它们注册到一个`NgForm`指令，Angular将该指令附加到`<form>`标签。每个`FormControl`被注册为我们指定的`name`属性名字。[本章后面](#ngForm)讲述了`NgForm`。
+    在内部，Angular 创建了一些`FormControl`，并把它们注册到`NgForm`指令，再将该指令附加到`<form>`标签。
+    注册每个`FormControl`时，使用`name`属性值作为键值。[本章后面](#ngForm)会讨论`NgForm`。
 
 :marked
   Let's add similar `[(ngModel)]` bindings and `name` attributes to *Alter Ego* and *Hero Power*.
@@ -578,9 +586,9 @@ figure.image-display
   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模型上*都能正常工作了。
+  为*第二人格*和*超能力*属性添加类似的`[(ngModel)]`绑定和`name`属性。
+  抛弃输入框的绑定消息，在组件顶部添加到`diagnostic`属性的新绑定。
+  这样就能确认双向数据绑定*在整个Hero模型上*都能正常工作了。
 
   After revision the core of our form should have three `[(ngModel)]` bindings and `name` attributes that
   look much like this:
@@ -594,27 +602,27 @@ figure.image-display
     - Each input element has an `id` property that is used by the `label` element's `for` attribute
     to match the label to its input control.
 
-    - 每一个input元素都有一个`id`属性，它被`label`元素的`for`属性用来把标签匹配到对应的`input`。
+      每一个 input 元素都有一个`id`属性，`label`元素的`for`属性用它来匹配到对应的输入控件。
 
     - Each input element has a `name` property that is required by Angular Forms to register the control with the form.
 
-    - 每一个input元素都有一个`name`属性，Angular的表单模块需要使用它为表单注册控制器。
+      每一个 input 元素都有一个`name`属性，Angular 表单用它注册控件。
 
 :marked
   If we ran the app right now and changed every Hero model property, the form might display like this:
 
-  如果现在我们运行本应用，并且修改Hero模型的每一个属性，表单看起来像这样：
+  如果现在运行本应用，修改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}}`绑定表达式已经完成了它的使命，**删除**它。
+  表单顶部的`{{diagnostic}}`绑定已经完成了它的使命，**删除**它。
 
 .l-sub-section
   :marked
@@ -634,27 +642,27 @@ figure.image-display
     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>。
-    这是一个**从模型到视图**的单向数据绑定。
+    在属性绑定中，值从模型中流动到屏幕上的目标属性 (property)。
+    通过把属性名括在方括号中来标记出目标属性，<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>。
-    这是一个**从视图到模型**的反向单向数据绑定。
+    在事件绑定中，值从屏幕上的目标属性流动到模型。
+    通过把属性名括在圆括号中来标记出目标属性，<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> 来标记出双向数据绑定和双向数据流。
+    不出所料，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`绑定拆成两个独立的绑定，就像我们重写的“Name”`<input>`绑定一样：
+    事实上，可以把`NgModel`绑定拆成两个独立的绑定，就像下面重写的“Name”`<input>`绑定一样：
   +makeExample('forms/ts/app/hero-form.component.html', 'ngModel-3','app/hero-form.component.html (excerpt)')(format=".")
 
   :marked
@@ -668,8 +676,8 @@ figure.image-display
     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>的绑定目标时，
+    它实际上是来自`NgModel`指令的事件属性。
+    当 Angular 在表单中看到<span style="font-family:courier">[(x)]</span>的绑定目标时，
     它会期待这个`x`指令有一个名为`x`的输入属性，和一个名为`xChange`的输出属性。
 
     The other oddity is the template expression, `model.name = $event`.
@@ -679,28 +687,27 @@ figure.image-display
     we should assign to the model's `name` property.
 
     模板表达式中的另一个古怪之处是`model.name = $event`。
-    我们以前看到的`$event`变量是来自DOM事件的。
-    但`ngModelChange`属性不会生成DOM事件 —— 它是一个Angular `EventEmitter`类型的属性，当它触发时，
-    它返回的是输入框的值 —— 它恰好和我们希望赋给模型上`name`属性的值一样。
+    之前看到的`$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)]`形式的双向绑定。
-    只有当我们不得不在事件处理函数中做一些特别的事情(比如合并或限制按键频率)时，才需要拆分出独立的事件处理函数。
+    很高兴知道这些，但是这样现实吗？实践上中，几乎总是优先使用`[(ngModel)]`形式的双向绑定。
+    只有当需要在事件处理函数中做一些特别的事情（比如合并或限制按键频率）时，才会拆分出独立的事件处理函数。
 
     Learn more about `NgModel` and other template syntax in the
     [Template Syntax](./template-syntax.html) chapter.
 
-    要学习关于`ngModel`和其它模板语法的更多知识，请参见
-    [模板语法](./template-syntax.html)一章。
+    要学习`ngModel`和其它模板语法的更多知识，见[模板语法](./template-syntax.html)。
 
 .l-main-section
 :marked
   ## Track change-state and validity with **ngModel**
 
-  ## 通过**ngModel**跟踪修改状态与有效性验证
+  ## 通过 **ngModel** 跟踪修改状态与有效性验证
 
   A form isn't just about data binding. We'd also like to know the state of the controls on our form.
 
@@ -708,14 +715,14 @@ figure.image-display
 
   Using `ngModel` in a form gives us more than just two way data binding. It also tells us if the user touched the control, if the value changed, or if the value became invalid.
 
-  在表单中使用`ngModel`能让我们比仅使用双向数据绑定获得更多的控制权。它还会告诉我们很多信息：用户碰过此控件吗？它的值变化了吗？数据变得无效了吗？
+  在表单中使用`ngModel`可以获得比仅使用双向数据绑定更多的控制权。它还会告诉我们很多信息：用户碰过此控件吗？它的值变化了吗？数据变得无效了吗？
 
   The *NgModel* directive doesn't just track state; it updates the control with special Angular CSS classes that reflect the state.
   We can leverage those class names to change the appearance of the
   control and make messages appear or disappear.
 
-  *NgModel*指令不仅仅跟踪状态。它还使用三个CSS类来更新控件，以便反映当前状态。
-  我们可以通过定制这些CSS类的样式来更改控件的外观，以及让消息被显示或隐藏。
+  *NgModel* 指令不仅仅跟踪状态。它还使用特定的 Angular CSS 类来更新控件，以反映当前状态。
+  可以利用这些 CSS 类来修改控件的外观，显示或隐藏消息。
 
 table
   tr
@@ -724,10 +731,10 @@ table
       p 状态
     th
       p Class if true
-      p 为真时的CSS类
+      p 为真时的 CSS 类
     th
       p Class if false
-      p 为假时的CSS类
+      p 为假时的 CSS 类
   tr
     td
       p Control has been visited
@@ -762,7 +769,8 @@ table
   Let's add a temporary [template reference variable](./template-syntax.html#ref-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类。
+  我们往姓名`<input>`标签上添加一个名叫 **spy** 的临时[模板引用变量](./template-syntax.html#local-vars)，
+  然后用这个 spy 来显示它上面的所有 CSS 类。
 
 +makeExample('forms/ts/app/hero-form.component.html', 'ngModelName-2','app/hero-form.component.html (excerpt)')(format=".")
 
@@ -775,19 +783,19 @@ table
 
   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:
 
@@ -798,7 +806,7 @@ figure.image-display
 :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="控件状态转换")
 
@@ -807,23 +815,23 @@ figure.image-display
   strong visual signal when the data are invalid and we want to mark required fields.
   So we add custom CSS for visual feedback.
 
-  (`ng-valid` | `ng-invalid`)这一对是我们最感兴趣的。当数据变得无效时，我们希望发出一个强力的视觉信号。我们还希望标记出必填字段。
-  于是我们加入自定义CSS来提供视觉反馈。
+  (`ng-valid` | `ng-invalid`)这一对是我们最感兴趣的。当数据变得无效时，我们希望发出一个强力的视觉信号，
+  还想要标记出必填字段。可以通过加入自定义 CSS 来提供视觉反馈。
 
   **Delete** the `#spy` template reference variable and `TODO` as they have served their purpose.
 
-  也**删除**模板引用变量`#spy`以及`TODO`，因为它们已经完成了使命。
+  **删除**模板引用变量`#spy`和`TODO`，因为它们已经完成了使命。
 
 .l-main-section
 :marked
   ## Add Custom CSS for Visual Feedback
 
-  ## 添加自定义CSS，以提供视觉反馈
+  ## 添加用于视觉反馈的自定义 CSS
 
   We realize we can mark required fields and invalid data 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="无效表单")
@@ -832,22 +840,22 @@ figure.image-display
   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`相邻。
+  在新建的`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” 属性。
+  这些样式的作用于两个 Angular 有效性类和 HTML 5 的“required”属性。
 
   We update the `<head>` of the `index.html` to include this style sheet.
 
-  我们更新`index.html`中的`<head>`标签来包含这个样式表。
+  我们更新`index.html`中的`<head>`来包含这个样式表。
 +makeExample('forms/ts/index.html', 'styles', 'index.html (节选)')(format=".")
 :marked
   ## Show and Hide Validation Error messages
 
-  ## 显示和隐藏有效性校验的错误信息
+  ## 显示和隐藏验证错误信息
 
   We can do better.
 
@@ -858,11 +866,11 @@ figure.image-display
   We can leverage the `ng-invalid` class to reveal a helpful message.
 
   “Name”输入框是必填的，清空它会让左侧的条变红。这表示*某些东西*是错的，但我们不知道错在哪里，或者如何纠正。
-  我们可以借助`ng-invalid`类来给出一个更有用的消息。
+  可以借助`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="必须填写姓名")
@@ -870,19 +878,19 @@ figure.image-display
 :marked
   To achieve this effect we extend the `<input>` tag with
 
-  要达到这个效果，我们得通过下列方式扩展`<input>`标签：
+  要达到这个效果，在`<input>`标签中添加：
 
   1. a [template reference variable](./template-syntax.html#ref-vars)
 
-  1. 一个[模板引用变量](./template-syntax.html#ref-vars)
+     一个[模板引用变量](./template-syntax.html#ref-vars)
 
   1. the "*is required*" message in a nearby `<div>` which we'll display only if the control is invalid.
 
-  1. 将“is required”的消息放在附近的一个`<div>`元素中，只有当控件无效时，我们才显示它。
+     “is required”消息，放在邻近的一个`<div>`元素中，只有当控件无效时，才显示它。
 
   Here's how we do it for the *name* input box:
 
-  下面是我们应该对*Name*输入框所要做的：
+  对*Name*输入框做如下修改：
 +makeExample('forms/ts/app/hero-form.component.html',
   'name-with-error-msg',
   'app/hero-form.component.html (节选)')(format=".")
@@ -890,8 +898,8 @@ figure.image-display
   We need a template reference 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 "ngModel".
 
-  我们需要一个模板引用变量来访问模板中输入框的Angular控件。
-  这里，我们创建了一个名叫`name`的变量，并且把它赋值为"ngModel"。
+  模板引用变量可以访问模板中输入框的 Angular 控件。
+  这里，创建了名叫`name`的变量，并且赋值为"ngModel"。
 
 .l-sub-section
   :marked
@@ -900,13 +908,13 @@ figure.image-display
     tells Angular how to link the reference variable to the directive.
     We set `name` to `ngModel` because the `ngModel` directive's `exportAs` property happens to be "ngModel".
 
-    为什么是"ngModel"？
-    指令的[exportAs](../api/core/index/DirectiveMetadata-class.html#!#exportAs)属性告诉Angular如何把模板引用变量链接到指令中。
-    这里我们把`name`设置为`ngModel`就是因为`ngModel`指令的`exportAs`属性设置成了“ngModel”。
+    为什么是“ngModel”？
+    指令的 [exportAs](../api/core/index/DirectiveMetadata-class.html#!#exportAs) 属性告诉 Angular 如何链接模板引用变量到指令。
+    这里把`name`设置为`ngModel`是因为`ngModel`指令的`exportAs`属性设置成了“ngModel”。
 
     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`控件的属性，我们就可以控制“姓名”字段错误信息的可见性了。
+    现在，把`div`元素的`hidden`属性绑定到`name`控件的属性，这样就可以控制“姓名”字段错误信息的可见性了。
 +makeExample('forms/ts/app/hero-form.component.html',
   'hidden-error-msg',
   'app/hero-form.component.html (节选)')
@@ -914,7 +922,8 @@ figure.image-display
   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)的时，我们要隐藏消息。“全新”意味着从它被显示在表单中开始，用户还从未修改过它的值。
+  上例中，当控件是有效的 (valid) 或全新的 (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.
@@ -923,18 +932,19 @@ figure.image-display
 
   这种用户体验取决于开发人员的选择。有些人会希望任何时候都显示这条消息。
   如果忽略了`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)时，我们将看到这种选择的重要性。
+  有些人会为这种行为感到不安。它们希望只有在用户做出一个无效的更改时才显示这个消息。
+  如果当控件是“全新”状态时也隐藏消息，就能达到这个目的。
+  在往表单中[添加一个新英雄](#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
@@ -942,8 +952,8 @@ figure.image-display
   power to valid value.
 
   英雄的*超能力*选项是必填的。
-  只要愿意，我们可以往`<select>`上添加相同的错误处理。
-  但是这没有那么迫切，因为这个选择框已经足够把“超能力”约束成有效值了。
+  只要愿意，可以往`<select>`上添加相同的错误处理。
+  但没有必要，这个选择框已经限制了“超能力”只能选有效值。
 
 <a id="new-hero"></a>
 <a id="reset"></a>
@@ -951,13 +961,13 @@ figure.image-display
 :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.
 
-  我们希望在这个表单中添加一个新的英雄。
-  我们在表单的底部放一个“新增英雄”按钮，并且把它的点击事件绑定到一个组件方法上。
+  我们希望在这个表单中添加新的英雄。
+  在表单的底部放一个“New Hero（新增英雄）”按钮，并把它的点击事件绑定到组件方法。
 +makeExample('forms/ts/app/hero-form.component.html',
   'new-hero-button',
   'app/hero-form.component.html (新增英雄按钮)')
@@ -971,16 +981,16 @@ figure.image-display
   That's understandable as these are required fields.
   The error messages are hidden because the form is pristine; we haven't changed anything yet.
 
-  再次运行应用，点击*新增英雄*按钮，表单被清空了。
+  再次运行应用，点击 *New Hero* 按钮，表单被清空了。
   输入框左侧的*必填项*竖条是红色的，表示`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.
 
-  输入一个名字，并再次点击*新增英雄*按钮。
-  这次，我们看到了错误信息！为什么？当我们显示一个新(空白)的英雄时，我们不希望如此。
+  输入一个名字，再次点击 *New 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.
@@ -993,23 +1003,23 @@ figure.image-display
     replacing the entire hero and clearing the `name` property programmatically.
     Angular makes no assumptions and leaves the control in its current, dirty state.
 
-    这反映出，在这种实现方式下，Angular没办法区分是替换了整个英雄数据还是用程序单独清除了`name`属性。
-    Angular不能作出假设，因此只好让控件保留当前状态 —— 脏状态。
+    沉思一番你会发现，Angular 没办法区分是替换了整个英雄数据还是用程序清除了`name`属性。
+    Angular 不能作出假设，只好让控件保留当前状态 —— 脏状态。
 :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`.
 
-  我们不得不使用一个小花招来重置表单控件。
-  我们给组件添加一个`active`标记，把它初始化为`true`。当我们添加一个新的英雄时，它把`active`标记设置为`false`，
-  然后通过一个快速的`setTimeout`函数迅速把它设置回`true`。
+  可以使用一个小花招来重置表单控件。
+  给组件添加一个`active`标记，初始化为`true`。当添加一个新的英雄时，把`active`标记设置为`false`，
+  再通过一个快速的`setTimeout`函数迅速把它设置回`true`。
 +makeExample('forms/ts/app/hero-form.component.ts',
   'new-hero',
   'app/hero-form.component.ts (新增英雄 - 最终版)')(format=".")
 :marked
   Then we bind the form element to this `active` flag.
 
-  然后，我们把form元素绑定到这个`active`标志上。
+  然后，把 form 元素绑定到这个`active`标志。
 +makeExample('forms/ts/app/hero-form.component.html',
   'form-active',
   'app/hero-form.component.html (Form标签)')
@@ -1018,20 +1028,20 @@ figure.image-display
   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.
 
-  在通过`NgIf`绑定到`active`标志之后，点击“新增英雄”将从DOM中移除这个表单，并在一眨眼的功夫重建它。
+  因为`NgIf`绑定到`active`标志，点击 "New Hero" 将从DOM中移除这个表单，并在一眨眼的功夫重建它。
   重新创建的表单处于“全新”状态。错误信息被隐藏了。
 .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**
 
-  ## 通过**ngSubmit**来提交表单
+  ## 使用 **ngSubmit** 提交表单
 
   The user should be able to submit this form after filling it in.
   The Submit button at the bottom of the form
@@ -1039,26 +1049,26 @@ figure.image-display
   trigger a form submit because of its type (`type="submit"`).
 
   在填表完成之后，用户还应该能提交这个表单。
-  “提交”按钮位于表单的底部，它自己不会做任何事，但因为具有特殊的type值(`type="submit"`)，所以它会触发表单提交。
+  “Submit（提交）”按钮位于表单的底部，它自己不做任何事，但因为有特殊的 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
 
   仅仅触发“表单提交”在目前是没用的。
-  要让它有用，我们还要用另一个Angular指令更新`<form>`标签 —— `NgSubmit`，
-  并且通过事件绑定机制把它绑定到`HeroFormComponent.submit()`方法上。
+  要让它有用，我们还要用另一个 Angular 指令更新`<form>`标签 —— `NgSubmit`，
+  并且通过事件绑定把它绑定到`HeroFormComponent.submit()`方法。
 +makeExample('forms/ts/app/hero-form.component.html', 'ngSubmit')(format=".")
 
 :marked
   We slipped in something extra there at the end!  We defined a
   template reference variable, **`#heroForm`**, and initialized it with the value, "ngForm".
 
-  最后，我们发现了一些额外的东西！我们定义了一个模板引用变量**`#heroForm`**，并且把它初始化为"ngForm"。
+  上面代码的最后出现一些额外的东西！定义了一个模板引用变量**`#heroForm`**，并初始化为"ngForm"。
 
   The variable `heroForm` is now a reference to the `NgForm` directive that governs the form as a whole.
 
-  这个`heroForm`变量现在引用的是`NgForm`指令，它代表的是表单的整体。
+  现在`heroForm`变量引用的是`NgForm`指令，它代表的是表单的整体。
 <a id="ngForm"></a>
 .l-sub-section
   :marked
@@ -1068,11 +1078,11 @@ figure.image-display
 
     What `NgForm` directive? We didn't add an [NgForm](../api/forms/index/NgForm-directive.html) directive!
 
-    什么`NgForm`指令？我们没有添加过[NgForm](../api/common/index/NgForm-directive.html)指令啊！
+    什么`NgForm`指令？之前没有添加过[NgForm](../api/common/index/NgForm-directive.html)指令啊！
 
     Angular did. Angular creates and attaches an `NgForm` directive to the `<form>` tag automatically.
 
-    Angular替我们做了。Angular自动创建了`NgForm`指令，并且把它附加到`<form>`标签上。
+    是 Angular 干的。Angular 自动创建了`NgForm`指令，并把它附加到`<form>`标签。
 
     The `NgForm` directive supplements the `form` element with additional features.
     It holds the controls we created for the elements with `ngModel` directive and `name` attribute
@@ -1080,15 +1090,15 @@ figure.image-display
     It also has its own `valid` property which is true only *if every contained
     control* is valid.
 
-    `NgForm`指令为普通的`form`元素扩充了更多特性。
-    它持有我们通过`ngModel`指令和`name`属性为各个元素创建的那些控件类，并且监视它们的属性变化，包括有效性。
+    `NgForm`指令为`form`元素扩充了额外的特性。
+    它持有通过`ngModel`指令和`name`属性为各个元素创建的那些控件，并且监视它们的属性变化，包括有效性。
     它还有自己的`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:
 
-  模板中稍后的部分，通过`heroForm`变量，我们把按钮的`disabled`属性绑定到了表单的全员有效性。这里是那点HTML：
+  模板中稍后的部分，通过`heroForm`变量把按钮的`disabled`属性绑定到表单的整体有效性。这里是那点HTML：
 
 +makeExample('forms/ts/app/hero-form.component.html', 'submit-button')
 :marked
@@ -1099,12 +1109,12 @@ figure.image-display
   Now delete the *Name*. We violate the "name required" rule which
   is duly noted in our error message as before. And now the Submit button is also disabled.
 
-  现在，删除*姓名*。我们违反了“必填姓名”规则，它还是像以前那样显示了错误信息来提醒我们。同时，“提交”按钮也被禁用了。
+  现在，删除*姓名*。我们违反了“必填姓名”规则，它还是像以前那样显示出错误信息。同时，Submit 按钮也被禁用了。
 
   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?
 
-  没想明白？再想一会儿。如果没有Angular `NgForm`的帮助，我们又该怎么让按钮的禁用/启用状态和表单的有效性关联起来呢？
+  没感动吗？再想一会儿。如果没有 Angular `NgForm`的帮助，又该怎么让按钮的禁用/启用状态和表单的有效性关联起来呢？
 
   For us, it was as simple as
 
@@ -1112,21 +1122,21 @@ figure.image-display
 
   1. Define a template reference variable on the (enhanced) form element
 
-  1. 定义一个模板引用变量，放在(强化过的)form元素上
+     定义一个模板引用变量，放在（强化过的）form 元素上
 
   2. Reference that variable in a button some 50 lines away.
 
-  2. 从50行之外的按钮上引用这个变量。
+     从50行之外的按钮上引用这个变量。
 
 .l-main-section
 :marked
   ## Toggle two form regions (extra credit)
 
-  ## 切换两个表单区域(额外的荣誉)
+  ## 切换两个表单区域（额外的奖励）
 
   Submitting the form isn't terribly dramatic at the moment.
 
-  现在就提交表单还不够激动人心。
+  提交表单还是不够激动人心。
 
 .l-sub-section
   :marked
@@ -1138,20 +1148,20 @@ figure.image-display
     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.
 
-  先把表单包裹进`<div>`中，并且把它的`hidden`属性绑定到`HeroFormComponent.submitted`属性上。
+  先把表单包裹进`<div>`中，再把它的`hidden`属性绑定到`HeroFormComponent.submitted`属性。
 
 +makeExample('forms/ts/app/hero-form.component.html', 'edit-div', 'app/hero-form.component.html (节选)')(format=".")
 
@@ -1160,7 +1170,8 @@ figure.image-display
   the `submitted` property is false until we submit the form,
   as this fragment from the `HeroFormComponent` reminds us:
 
-  主表单从一开始就是可见的，因为`submitted`属性是false，直到我们提交了这个表单。来自`HeroFormComponent`的代码片段告诉了我们这一点：
+  主表单从一开始就是可见的，因为`submitted`属性是false，直到我们提交了这个表单。
+  来自`HeroFormComponent`的代码片段告诉了我们这一点：
 
 +makeExample('forms/ts/app/hero-form.component.ts', 'submitted')(format=".")
 
@@ -1168,12 +1179,12 @@ figure.image-display
   When we click the Submit button, the `submitted` flag becomes true and the form disappears
   as planned.
 
-  当我们点击提交按钮时，`submitted`标志会变成true，并且表单像预想中一样消失了。
+  当我们点击 Submit 按钮时，`submitted`标志会变成 true，并且表单像预想中一样消失了。
 
   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:
 
-  现在，当表单处于已提交状态时，我们需要显示一些别的东西。
+  现在，当表单处于已提交状态时，需要显示一些别的东西。
   在我们刚刚写的`<div>`包装下方，添加下列HTML块：
 +makeExample('forms/ts/app/hero-form.component.html', 'submitted', 'app/hero-form.component.html (节选)')
 
@@ -1182,20 +1193,20 @@ figure.image-display
   This slug of HTML only appears while the component is in the submitted state.
 
   我们的英雄又来了，它通过插值表达式绑定显示为只读内容。
-  这一小段HTML只在组件处于已提交状态时才会显示。
+  这一小段 HTML 只在组件处于已提交状态时才会显示。
 
   We added an Edit button whose click event is bound to an expression
   that clears the `submitted` flag.
 
-  我们添加了一个“编辑”按钮，它的click事件被绑定到了一个表达式，它会清除`submitted`标志。
+  添加了一个“Edit（编辑）”按钮，它的click事件绑定到一个表达式，用于清除`submitted`标志。
 
   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
@@ -1206,43 +1217,43 @@ figure.image-display
   The Angular form techniques discussed in this chapter take
   advantage of the following framework features to provide support for data modification, validation and more:
 
-  本章讨论的Angular表单技术利用了下列框架特性来支持数据修改、验证和更多操作：
+  本章讨论的 Angular 表单技术利用了下列框架特性来支持数据修改、验证和更多操作：
 
   - An Angular HTML form template.
 
-  - Angular HTML表单模板。
+    Angular HTML 表单模板。
 
   - A form component class with a `Component` decorator.
 
-  - 带有`Component`装饰器的组件类。
+    带有`Component`装饰器的表单组件类。
 
   - The `ngSubmit` directive for handling the form submission.
 
-  - 用来处理表单提交的`ngSubmit`指令。
+    用来处理表单提交的`ngSubmit`指令。
 
   - Template reference variables such as `#heroForm`, `#name` and `#power`.
 
-  - 模板引用变量，如`#heroForm`、`#name`和`#power`。
+    模板引用变量，如`#heroForm`、`#name`和`#power`。
 
   - The `[(ngModel)]` syntax and a `name` attribute for two-way data binding, validation and change tracking.
 
-  - 用于双向数据绑定、数据验证和变化追踪的`[(ngModel)]`语法和`name`属性。
+    用于双向数据绑定、数据验证和变化追踪的`[(ngModel)]`语法和`name`属性。
 
   - The reference variable’s `valid` property on input controls to check if a control is valid and show/hide error messages.
 
-  - 指向input控件的引用变量上的`valid`属性，可用于检查控件是否有效、是否显示/隐藏错误信息。
+    指向 input 控件的引用变量上的`valid`属性，可用于检查控件是否有效、是否显示/隐藏错误信息。
 
   - Controlling the submit button's enabled state by binding to `NgForm` validity.
 
-  - 通过绑定到`NgForm`的有效性状态，控制提交按钮的禁用状态。
+    通过绑定到`NgForm`的有效性状态，控制提交按钮的禁用状态。
 
   - Custom CSS classes that provide visual feedback to users about invalid controls.
 
-  - 对无效控件，定制CSS类来给用户提供视觉反馈。
+    定制 CSS 类来给用户提供无效控件的视觉反馈。
 
   Our final project folder structure should look like this:
 
-  我们最终的项目目录结构看起来是这样：
+  最终的项目目录结构看起来是这样：
 
 .filetree
   .file angular-forms
diff --git a/public/resources/css/_translate.scss b/public/resources/css/_translate.scss
index 127a6c0ed0..e84f1fea39 100644
--- a/public/resources/css/_translate.scss
+++ b/public/resources/css/_translate.scss
@@ -43,9 +43,12 @@
     }
   }
 
-  li {
+  th, td, li {
     p {
       margin: 0;
+      &.original-english {
+        margin: 0;
+      }
     }
 
     ul {