From 9f2c4270e1f046d25a862038f1615cf5f29420c5 Mon Sep 17 00:00:00 2001 From: Zhicheng Wang Date: Thu, 23 Jun 2016 09:22:50 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=BA=86=E5=AF=BC=E8=88=AA?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=EF=BC=8C=E7=9B=B4=E6=8E=A5=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E6=96=B0=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/docs/ts/latest/cookbook/_data.json | 7 ++++++- .../docs/ts/latest/cookbook/dynamic-form.jade | 16 ++++++++++++++++ public/docs/ts/latest/guide/_data.json | 14 +++++++++++--- public/docs/ts/latest/guide/forms.jade | 18 ++++++++++++++++++ 4 files changed, 51 insertions(+), 4 deletions(-) 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指令更新`
`标签 —— `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`指令，它代表的是表单的整体。 + .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 现在，当表单处于已提交状态时，我们需要显示一些别的东西。 在我们刚刚写的`
`包装下方，添加下列HTML块儿： + +makeExample('forms/ts/app/hero-form.component.html', 'submitted', 'app/hero-form.component.html (节选)') :marked