调整了导航菜单，直接显示新版
This commit is contained in:
Zhicheng Wang
parent
e1eba2caea
commit
9f2c4270e1
|
|
@ -25,9 +25,14 @@
|
|||
"title": "依赖注入",
|
||||
"intro": "依赖注入技术"
|
||||
},
|
||||
"dynamic-form": {
|
||||
"title": "动态表单",
|
||||
"intro": "通过FormGroup渲染动态表单"
|
||||
},
|
||||
"dynamic-form-deprecated": {
|
||||
"title": "动态表单(已废弃)",
|
||||
"intro": "通过NgFormModel渲染动态表单"
|
||||
"intro": "通过NgFormModel渲染动态表单",
|
||||
"hide": true
|
||||
},
|
||||
|
||||
"set-document-title": {
|
||||
|
|
|
|||
|
|
@ -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 <a href='/docs/ts/latest/cookbook/dynamic-form-deprecated.html'>here</a>.
|
||||
|
||||
旧版表单API已经过时了，但是在本指南中仍然维护着一个独立的版本，它使用已废弃的表单API，参见<a href='/docs/ts/latest/cookbook/dynamic-form-deprecated.html'>这里</a>。
|
||||
|
||||
: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
|
||||
<a id="object-model"></a>
|
||||
|
|
@ -132,6 +142,7 @@ include ../_util-fns
|
|||
<a id="form-component"></a>
|
||||
: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`常量，我们就能访问所有这些表单类指令。
|
||||
|
||||
<a id="questionnaire-metadata"></a>
|
||||
:marked
|
||||
|
|
@ -214,6 +229,7 @@ include ../_util-fns
|
|||
<a id="dynamic-template"></a>
|
||||
:marked
|
||||
## Dynamic Template
|
||||
|
||||
## 动态模板
|
||||
|
||||
Although in this example we're modelling a job application for heroes, there are no references to any specific hero question
|
||||
|
|
|
|||
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -440,6 +440,7 @@ ol
|
|||
|
||||
li 打开<code>index.html</code>文件并且把下列链接添加到<code><head></code>中。
|
||||
+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 `<input>` 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.
|
||||
|
||||
注意，我们还往`<input>`标签上添加了一个`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指令更新`<form>`标签 —— `NgSubmit`，
|
||||
并且通过事件绑定机制把它绑定到`HeroFormComponent.submit()`方法上。
|
||||
|
||||
+makeExample('forms/ts/app/hero-form.component.html', 'ngSubmit')(format=".")
|
||||
|
||||
:marked
|
||||
|
|
@ -1041,6 +1054,7 @@ figure.image-display
|
|||
The variable `heroForm` is now a reference to the `NgForm` directive that governs the form as a whole.
|
||||
|
||||
这个`heroForm`变量现在引用的是`NgForm`指令，它代表的是表单的整体。
|
||||
|
||||
<a id="ngForm"></a>
|
||||
.l-sub-section
|
||||
:marked
|
||||
|
|
@ -1071,6 +1085,7 @@ figure.image-display
|
|||
the `heroForm` variable. Here's that bit of markup:
|
||||
|
||||
模板中稍后的部分，通过`heroForm`变量，我们把按钮的`disabled`属性绑定到了表单的全员有效性。这里是那点儿HTML：
|
||||
|
||||
+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.
|
||||
|
|
@ -1109,6 +1124,7 @@ figure.image-display
|
|||
Submitting the form isn't terribly dramatic at the moment.
|
||||
|
||||
现在就提交表单还不够激动人心。
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
An unsurprising observation for a demo. To be honest,
|
||||
|
|
@ -1121,6 +1137,7 @@ figure.image-display
|
|||
对演示来说，这是一个平淡的收场。老实说，即使让它更出彩，也无法教给我们任何关于表单的新知识。
|
||||
但这是一个锻炼我们新学到的绑定技能的好机会。
|
||||
如果你不感兴趣，可以跳过本章的下面这部分，而不用担心错失任何东西。
|
||||
|
||||
:marked
|
||||
Let's do something more strikingly visual.
|
||||
Let's hide the data entry area and display something else.
|
||||
|
|
@ -1155,6 +1172,7 @@ figure.image-display
|
|||
|
||||
现在，当表单处于已提交状态时，我们需要显示一些别的东西。
|
||||
在我们刚刚写的`<div>`包装下方，添加下列HTML块儿：
|
||||
|
||||
+makeExample('forms/ts/app/hero-form.component.html', 'submitted', 'app/hero-form.component.html (节选)')
|
||||
|
||||
:marked
|
||||
|
|
|
|||
Loading…
Reference in New Issue