translate: form-validation: line 89
This commit is contained in:
parent
b82cf0de4c
commit
1a7773e9d6
|
@ -4,52 +4,89 @@ a#top
|
|||
:marked
|
||||
We can improve overall data quality by validating user input for accuracy and completeness.
|
||||
|
||||
我们可以通过验证用户输入的准确性和完整性,来增强整体数据质量。
|
||||
|
||||
In this cookbook we show how to validate user input in the UI and display useful validation messages
|
||||
using first the template-driven forms and then the reactive forms approach.
|
||||
|
||||
在本烹饪书中,我们展示在界面中如何验证用户输入,并显示有用的验证信息,先使用模板驱动表单方式,再使用响应式表单方式。
|
||||
|
||||
.l-sub-section
|
||||
:marked
|
||||
Learn more about these choices in the [Forms chapter.](../guide/forms.html)
|
||||
|
||||
参见[表单章节](../guide/forms.html)了解关于这些选择的更多知识。
|
||||
|
||||
a#toc
|
||||
:marked
|
||||
## Table of Contents
|
||||
|
||||
## 目录
|
||||
|
||||
[Simple Template-Driven Forms](#template1)
|
||||
|
||||
[简单的模板驱动表单](#template1)
|
||||
|
||||
[Template-Driven Forms with validation messages in code](#template2)
|
||||
|
||||
[代码中拥有验证信息的模板驱动表单](#template2)
|
||||
|
||||
[Reactive Forms with validation in code](#reactive)
|
||||
|
||||
[代码中拥有验证的响应式表单](#reactive)
|
||||
|
||||
[Custom validation](#custom-validation)
|
||||
|
||||
[自定义验证](#custom-validation)
|
||||
|
||||
[Testing](#testing)
|
||||
|
||||
[测试](#testing)
|
||||
|
||||
a#live-example
|
||||
:marked
|
||||
**Try the live example to see and download the full cookbook source code**
|
||||
live-example(name="cb-form-validation" embedded img="cookbooks/form-validation/plunker.png")
|
||||
|
||||
**查看在线例子,并下载整个烹饪书的源代码**
|
||||
|
||||
live-example(name="cb-form-validation" embedded img="cookbooks/form-validation/plunker.png") 在线例子
|
||||
|
||||
.l-main-section
|
||||
a#template1
|
||||
:marked
|
||||
## Simple Template-Driven Forms
|
||||
|
||||
## 简单的模板驱动表单
|
||||
|
||||
In the template-driven approach, you arrange
|
||||
[form elements](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML) in the component's template.
|
||||
|
||||
在模板驱动表单方法中,你在组件的模板中组织[表单元素](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML)。
|
||||
|
||||
You add Angular form directives (mostly directives beginning `ng...`) to help
|
||||
Angular construct a corresponding internal control model that implements form functionality.
|
||||
We say that the control model is _implicit_ in the template.
|
||||
|
||||
你可以添加Angular表单指令(通常为以`ng`开头的指令)来帮助Angular构建对应的内部控制模型,以实现表单功能。
|
||||
控制模型在模板中是**隐式**的。
|
||||
|
||||
To validate user input, you add [HTML validation attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation)
|
||||
to the elements. Angular interprets those as well, adding validator functions to the control model.
|
||||
|
||||
要验证用户输入,你添加[HTML验证属性](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation)到元素中。
|
||||
Angular拦截这些元素,添加验证器功能到控制模型中。
|
||||
|
||||
Angular exposes information about the state of the controls including
|
||||
whether the user has "touched" the control or made changes and if the control values are valid.
|
||||
|
||||
Angular暴露关于控制状态的信息,包括用户是否已经“触摸“了控制器,或者用户已经作了更新和控制器的值是否还有效。
|
||||
|
||||
In the first template validation example,
|
||||
we add more HTML to read that control state and update the display appropriately.
|
||||
Here's an excerpt from the template html for a single input box control bound to the hero name:
|
||||
|
||||
在第一个模板验证例子中,我们添加了更多HTML,来读取控制器状态并适当更新显示。
|
||||
下面是模板HTML中提取的,一个绑定到英雄名字的输入框控制器:
|
||||
+makeExample('cb-form-validation/ts/app/template/hero-form-template1.component.html','name-with-error-msg','template/hero-form-template1.component.html (Hero name)')(format='.')
|
||||
|
||||
:marked
|
||||
|
|
Loading…
Reference in New Issue