` elements.
-
-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.
-
-Now that the messages are in code, you have more flexibility and can compose messages more efficiently.
-You 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.
-
-
-{@a formmodule}
-
-
-### _FormModule_ and Template Driven forms
-
-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.
-
-You've been reviewing the Template Driven approach which requires the `FormsModule`.
-Here's how you imported it in the `HeroFormTemplateModule`.
-
-
-
-
-
-
-
-
-
-
-This guide hasn't talked about the `SharedModule` or its `SubmittedComponent` which appears at the bottom of every
-form template in this cookbook.
-
-They're not germane to the validation story. Look at the [live example](guide/form-validation#live-example) if you're interested.
-
+Check out the [live example](guide/form-validation#live-example) for the full template-driven component.
-
-
-
{@a reactive}
+## Reactive form validation
-## Reactive Forms with validation in code
+In a reactive form, the source of truth is the component class. Instead of adding validators
+through attributes in the template, you add validator functions directly to the form control
+model in the component class. These functions are then called whenever the value of the
+control changes.
-In the Template Driven approach, you mark up 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_.
+### Validator functions
-**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.
+There are two types of validator functions: sync validators and async validators.
-This allows you to do the following:
+* **Sync validators**: functions that take a control instance and immediately return either a
+a set of validation errors or `null`. These can be passed in as the second argument when
+you instantiate a `FormControl`.
-* Add, change, and remove validation functions on the fly.
-* Manipulate the control model dynamically from within the component.
-* [Test](guide/form-validation#testing-considerations) validation and control logic with isolated unit tests.
+* **Async validators**: functions that take a control instance and return a Promise
+or Observable that later emits a set of validation errors or `null`. These can be passed
+in as the third argument when you instantiate a `FormControl`.
-The following sample re-writes the hero form in Reactive Forms style.
+Note: for performance reasons, async validators are only run if all sync validators pass. Each
+must complete before errors are set.
+### Built-in validators
-{@a reactive-forms-module}
-
-
-### Switch to the _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:
-
-
-
-
-
-
-
-The Reactive Forms feature module and component are in the `src/app/reactive` folder.
-Focus on the `HeroFormReactiveComponent` there, starting with its template.
-
-
-{@a reactive-component-template}
-
-
-### Component template
-
-Begin by changing the `