`.
假设增加需要验证的控件和规则后会怎么样。
通常，HTML比代码更难阅读和维护。
初始的模板已经很大了，如果我们添加更多验证消息``，它会迅速变得更大。
After moving the validation messaging to the component,
the template grows more slowly and proportionally.
Each field has approximately the same number of lines no matter its number of validation rules.
The component also grows proportionally, at the rate of one line per validated field
and one line per validation message.
将验证消息移到组件后，模板的增长变得更加缓慢，幅度也小一些。
不管有多少个验证规则，每个控件的行数是差不多的。
组件也按比例增长，每增加一个控件增加一行，每个验证消息一行。
Both trends are manageable.
两条线容易维护。
Now that the messages are in code, we have more flexibility. We can compose messages more intelligently.
We can refactor the messages out of the component, perhaps to a service class that retrieves them from the server.
In short, there are more opportunities to improve message handling now that text and logic have moved from template to code.
现在消息在代码中，我们有更多的灵活度。我们更加智能的撰写消息。
我们可以将消息重构出组件，比如到一个服务类，从服务端获取消息。
简而言之，有很多机会增强消息处理，因为文本和逻辑都已经从模板移到代码中。
### _FormModule_ and template-driven forms
### _FormModule_ 和模板驱动表单
Angular has two different forms modules — `FormsModule` and `ReactiveFormsModule` —
that correspond with the two approaches to form development.
Both modules come from the same `@angular/forms` library package.
Angular有两种不同的表单模块 - `FormsModule`和`ReactiveFormsModule` - 它们与表单开发的两种方法对应。
两种模块都从同一个`@angular/forms`库。
We've been reviewing the "Template-driven" approach which requires the `FormsModule`
Here's how we imported it in the `HeroFormTemplateModule`.
我们一直在探讨**模板驱动**方法，它需要`FormsModule`。下面是如何在`HeroFormTemplateModule`中导入它：
+makeExample('cb-form-validation/ts/app/template/hero-form-template.module.ts','','template/hero-form-template.module.ts')(format='.')
.l-sub-section
:marked
We haven't talked about the `SharedModule` or its `SubmittedComponent` which appears at the bottom of every
form template in this cookbook.
我们还没有讲`SharedModule`或者它的`SubmittedComponent`，它们出现在本烹饪书的每一个表单模板中。
They're not germane to the validation story. Look at the [live example](#live-example) if you're interested.
它们与表单验证没有紧密的关系。如果你感兴趣，参见[在线例子](#live-example)。
.l-main-section
a#reactive
:marked
## Reactive Forms
## 响应式表单
In the template-driven approach, you markup the template with form elements, validation attributes,
and `ng...` directives from the Angular `FormsModule`.
At runtime, Angular interprets the template and derives its _form control model_.
在模板驱动方法中，你在模板中标出表单元素、验证属性和Angular`FormsModule`中的`ng...`指令。
在运行时间，Angular解释模板并从**表单控制器模型**衍生它。
**Reactive Forms** takes a different approach.
You create the form control model in code. You write the template with form elements
and`form...` directives from the Angular `ReactiveFormsModule`.
At runtime, Angular binds the template elements to your control model based on your instructions.
**响应式表单**采用不同的方法。
你在代码中创建表单控制器模型，并用表单元素和来自Angular `ReactiveFormsModule`中的`form...`指令来编写模板。
在运行时间，Angular根据你的指示绑定模板元素到你的控制器模型。
This approach requires a bit more effort. *You have to write the control model and manage it*.
这个方法需要做一些额外的工作。*你必须编写并管理控制器模型**
In return, you can
作为回报，你可以：
* add, change, and remove validation functions on the fly
* 随时添加、修改和删除验证函数
* manipulate the control model dynamically from within the component
* 在组件内动态操纵控制器模型
* [test](#testing) validation and control logic with isolated unit tests.
* 使用孤立单元测试来[测试](#testing)验证和控制器逻辑
The third cookbook sample re-writes the hero form in _reactive forms_ style.
第三个烹饪书例子用**响应式表单**风格重新编写英雄表格。
### Switch to the _ReactiveFormsModule_
### 切换到_ReactiveFormsModule_
The reactive forms classes and directives come from the Angular `ReactiveFormsModule`, not the `FormsModule`.
The application module for the "Reactive Forms" feature in this sample looks like this:
响应式表单类和指令来自于Angular的`ReactiveFormsModule`，不是`FormsModule`。
本例中，应用模块的“响应式表单”特性是这样的：
+makeExample('cb-form-validation/ts/app/reactive/hero-form-reactive.module.ts','','app/reactive/hero-form-reactive.module.ts')(format='.')
:marked
The "Reactive Forms" feature module and component are in the `app/reactive` folder.
Let's focus on the `HeroFormReactiveComponent` there, starting with its template.
“响应式表单”特性模块和组件在`app/reactive`目录。
让我们关注那里的`HeroFormReactiveComponent`，先看它的模板。
### Component template
## 组件模板
We begin by changing the `