Merge pull request #159 from todoubaba/forms

Polish forms.jade (round 2)
This commit is contained in:
Rex 2016-11-30 17:25:15 +00:00 committed by GitHub
commit f02b66490a
1 changed files with 39 additions and 39 deletions

View File

@ -72,13 +72,13 @@ include ../_util-fns
:marked :marked
That's not the only way to create a form but it's the way we'll cover in this guide. That's not the only way to create a form but it's the way we'll cover in this guide.
这不是创建表单的唯一方式,本章中只介绍模板驱动的表单。(译注Angular支持的另一种方式叫做模型驱动表单Model-Driven Forms) 这不是创建表单的唯一方式,本章中只介绍模板驱动的表单。
:marked :marked
We can build almost any form we need with an Angular template — login forms, contact forms ... pretty much any business forms. 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, 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. conditionally enable or disable specific controls, trigger built-in visual feedback, and much more.
利用Angular模板可以构建几乎所有表单 —— 登录表单、联系人表单…… 以及任何的商务表单。 利用 Angular 模板,可以构建几乎所有表单 — 登录表单、联系人表单…… 以及任何的商务表单。
可以创造性的摆放各种控件、把它们绑定到数据、指定校验规则、显示校验错误、有条件的禁用或 可以创造性的摆放各种控件、把它们绑定到数据、指定校验规则、显示校验错误、有条件的禁用或
启用特定的控件、触发内置的视觉反馈等等,不胜枚举。 启用特定的控件、触发内置的视觉反馈等等,不胜枚举。
@ -188,7 +188,7 @@ figure.image-display
and one optional field (`alterEgo`). 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: Create a new file in the app folder called `hero.ts` and give it the following class definition:
@ -321,7 +321,7 @@ code-example(format="").
`app.module.ts` defines the application's root module. In it we identify the external modules we'll use in our application `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`. 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 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. `imports` for our application module before we can use forms.
@ -526,7 +526,7 @@ figure.image-display
makes binding our form to the model super-easy. makes binding our form to the model super-easy.
虽然可以在表单中再次使用这些技术。 虽然可以在表单中再次使用这些技术。
但是,这里将介绍个新东西 —— `[(ngModel)]`语法,使表单绑定到模型的工作变得超级简单。 但是,这里将介绍个新东西`[(ngModel)]`语法,使表单绑定到模型的工作变得超级简单。
Find the `<input>` tag for the "Name" and update it like this Find the `<input>` tag for the "Name" and update it like this
@ -696,7 +696,7 @@ figure.image-display
the event handling such as debounce or throttle the key strokes. the event handling such as debounce or throttle the key strokes.
很高兴知道这些,但是这样现实吗?实践上中,几乎总是优先使用`[(ngModel)]`形式的双向绑定。 很高兴知道这些,但是这样现实吗?实践上中,几乎总是优先使用`[(ngModel)]`形式的双向绑定。
只有当需要在事件处理函数中做一些特别的事情(如合并或限制按键频率)时,才会拆分出独立的事件处理函数。 只有当需要在事件处理函数中做一些特别的事情(如合并或限制按键频率)时,才会拆分出独立的事件处理函数。
Learn more about `NgModel` and other template syntax in the Learn more about `NgModel` and other template syntax in the
[Template Syntax](./template-syntax.html) guide. [Template Syntax](./template-syntax.html) guide.
@ -1213,7 +1213,7 @@ figure.image-display
- Template reference variables such as `#heroForm`, `#name` and `#power`. - 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. - The `[(ngModel)]` syntax and a `name` attribute for two-way data binding, validation and change tracking.