Merge pull request #159 from todoubaba/forms
Polish forms.jade (round 2)
This commit is contained in:
		
						commit
						f02b66490a
					
				| @ -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. | ||||||
| 
 | 
 | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user