diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json
index ac44f1dac2..5e3e931132 100644
--- a/public/docs/ts/latest/cookbook/_data.json
+++ b/public/docs/ts/latest/cookbook/_data.json
@@ -25,9 +25,14 @@
"title": "依赖注入",
"intro": "依赖注入技术"
},
+ "dynamic-form": {
+ "title": "动态表单",
+ "intro": "通过FormGroup渲染动态表单"
+ },
"dynamic-form-deprecated": {
"title": "动态表单(已废弃)",
- "intro": "通过NgFormModel渲染动态表单"
+ "intro": "通过NgFormModel渲染动态表单",
+ "hide": true
},
"set-document-title": {
diff --git a/public/docs/ts/latest/cookbook/dynamic-form.jade b/public/docs/ts/latest/cookbook/dynamic-form.jade
index 26e946fa87..3e6c56021a 100644
--- a/public/docs/ts/latest/cookbook/dynamic-form.jade
+++ b/public/docs/ts/latest/cookbook/dynamic-form.jade
@@ -4,7 +4,11 @@ include ../_util-fns
:marked
This cookbook uses the new forms API.
+ 这本烹饪宝典使用新的表单API。
+
The old forms API is deprecated, but we still maintain a separate version of the cookbook using the deprecated forms API here.
+
+ 旧版表单API已经过时了,但是在本指南中仍然维护着一个独立的版本,它使用已废弃的表单API,参见这里。
:marked
We can't always justify the cost and time to build handcrafted forms, especially if we'll need a great number of them, they're similar to each other, and they change frequently to meet rapidly changing business and regulatory requirements.
@@ -77,9 +81,15 @@ include ../_util-fns
:marked
The old forms API is going through a deprecation phase. During this transition Angular is supporting both form modules.
+ 老的表单API已经进入了废弃阶段。在这个过渡期间,Angular会同时支持两个表单模块。
+
To remind us that the old API is deprecated, Angular will print a warning message to the console.
+ 为了提醒我们“老的API已被废弃”,Angular将会往控制台输出一些警告信息。
+
Since we are converting to the new API, and no longer need the old API, we call `disableDeprecatedForms()` to disable the old form functionality and the warning message.
+
+ 一旦我们完全转换成了新的API而不再用老的,可以调用`disableDeprecatedForms()`来彻底禁用老的表单功能,并消除警告信息。
.l-main-section
@@ -132,6 +142,7 @@ include ../_util-fns
:marked
## Question form components
+
## 问卷表单组件
Now that we have defined the complete model we are ready to create components to represent the dynamic form.
@@ -178,8 +189,12 @@ include ../_util-fns
在这两个组件中,我们依赖Angular的**formGroup**来把模板HTML和底层控件对象连接起来,该对象从问卷问题模型里获取渲染和验证规则。
`formControlName` and `formGroup` have to be registered as directives before we can use them in our templates.
+
+ 要想在模板中使用它们,必须先把`formControlName`和`formGroup`注册成指令。
It turns out we get access to all form directives by importing and registering `REACTIVE_FORM_DIRECTIVES`.
+
+ 通过导入和注册`REACTIVE_FORM_DIRECTIVES`常量,我们就能访问所有这些表单类指令。
:marked
@@ -214,6 +229,7 @@ include ../_util-fns
:marked
## Dynamic Template
+
## 动态模板
Although in this example we're modelling a job application for heroes, there are no references to any specific hero question
diff --git a/public/docs/ts/latest/guide/_data.json b/public/docs/ts/latest/guide/_data.json
index dd4f51f5b4..4c34e19b16 100644
--- a/public/docs/ts/latest/guide/_data.json
+++ b/public/docs/ts/latest/guide/_data.json
@@ -29,11 +29,19 @@
"basics": true
},
+ "forms": {
+ "title": "表单",
+ "intro": "表单创建一个有机、有效、引人注目的数据输入体验。Angular表单协调一组数据绑定控件,跟踪变更,验证输入的有效性,并且显示错误信息。",
+ "nextable": true,
+ "basics": true
+ },
+
"forms-deprecated": {
"title": "表单(已废弃)",
"intro": "表单创建一个有机、有效、引人注目的数据输入体验。Angular表单协调一组数据绑定控件,跟踪变更,验证输入的有效性,并且显示错误信息。",
"nextable": true,
- "basics": true
+ "basics": true,
+ "hide": true
},
"dependency-injection": {
@@ -79,8 +87,8 @@
},
"security": {
- "title": "Security",
- "intro": "Developing for content security in Angular applications"
+ "title": "安全",
+ "intro": "开发“内容安全”的Angular应用。"
},
"hierarchical-dependency-injection": {
diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade
index 981ff7c391..b44136e48e 100644
--- a/public/docs/ts/latest/guide/forms.jade
+++ b/public/docs/ts/latest/guide/forms.jade
@@ -440,6 +440,7 @@ ol
li 打开index.html
文件并且把下列链接添加到<head>
中。
+makeExample('forms/ts/index.html', 'bootstrap')(format=".")
+
:marked
.l-main-section
:marked
@@ -548,6 +549,8 @@ figure.image-display
诊断信息是一个证据,用来表明数据从输入框流动到模型,再反向流动回来的过程。**这就是双向数据绑定!**
Notice that we also added a `name` attribute to our `` tag. This is a requirement when using `[(ngModel)]` in combination with a form, so that we can easily refer to it in the aggregate form value and validity state.
+
+ 注意,我们还往``标签上添加了一个`name`属性(Attribute)。当在表单中使用`[(ngModel)]`时,这是必须的,这样我们才能轻松的引用它来聚合表单值以及校验状态。
Let's add similar `[(ngModel)]` bindings to *Alter Ego* and *Hero Power*.
We'll ditch the input box binding message
@@ -793,6 +796,7 @@ figure.image-display
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="控件状态转换")
@@ -875,6 +879,7 @@ figure.image-display
我们需要一个模板引用变量来访问模板中输入框的Angular控件。
这里,我们创建了一个名叫`name`的变量,并且把它赋值为"ngModel"。
+
.l-sub-section
:marked
Why "ngModel"?
@@ -941,6 +946,7 @@ figure.image-display
我们希望在这个表单中添加一个新的英雄。
我们在表单的底部放一个“新增英雄”按钮,并且把它的点击事件绑定到一个组件方法上。
+
+makeExample('forms/ts/app/hero-form.component.html',
'new-hero-button',
'app/hero-form.component.html (新增英雄按钮)')
@@ -970,6 +976,7 @@ figure.image-display
使用浏览器工具审查这个元素就会发现,这个*name*输入框并不是全新的。
更换了英雄*并不会重置控件的“全新”状态*。
+
.l-sub-section
:marked
Upon reflection, we realize that Angular cannot distinguish between
@@ -987,6 +994,7 @@ figure.image-display
我们不得不使用一个小花招来重置表单控件。
我们给组件添加一个`active`标记,把它初始化为`true`。当我们添加一个新的英雄时,它把`active`标记设置为`false`,
然后通过一个快速的`setTimeout`函数迅速把它设置回`true`。
+
+makeExample('forms/ts/app/hero-form.component.ts',
'new-hero',
'app/hero-form.component.ts (新增英雄 - 最终版)')(format=".")
@@ -994,6 +1002,7 @@ figure.image-display
Then we bind the form element to this `active` flag.
然后,我们把form元素绑定到这个`active`标志上。
+
+makeExample('forms/ts/app/hero-form.component.html',
'form-active',
'app/hero-form.component.html (Form标签)')
@@ -1004,6 +1013,7 @@ figure.image-display
在通过`NgIf`绑定到`active`标志之后,点击“新增英雄”将从DOM中移除这个表单,并在一眨眼的功夫重建它。
重新创建的表单处于“全新”状态。错误信息被隐藏了。
+
.l-sub-section
:marked
This is a temporary workaround while we await a proper form reset feature.
@@ -1014,7 +1024,9 @@ figure.image-display
.l-main-section
:marked
## Submit the form with **ngSubmit**
+
## 通过**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
@@ -1030,6 +1042,7 @@ figure.image-display
仅仅触发“表单提交”在目前是没用的。
要让它有用,我们还要用另一个Angular指令更新`