anchor.diff:    The file exports two classes and two constants. The `Address` 
     and `Hero` classes define the application _data model_. 
     The `heroes` and `states` constants supply the test data. 
  +  
  +  这个文件导出两个类和两个常量。`Address`和`Hero`类定义应用的*数据模型*。
  +  `heroes`和`states`常量提供测试数据。
   
   .l-main-section
   a#create-component
   :marked
     ## Create a _reactive forms_ component
  +  
  +  ## 创建*响应式表单*组件
  +  
     Make a new file called 
     `hero-detail.component.ts` in the `app` directory and import these symbols:
  +  
  +  在`app`目录下创建一个名叫`hero-detail.component.ts`的新文件，并且导入下列符号：
   
   +makeExample('reactive-forms/ts/src/app/hero-detail-1.component.ts', 'imports','src/app/hero-detail.component.ts')(format=".")
   
   :marked
     Now enter the `@Component` decorator that specifies the `HeroDetailComponent` metadata:
  +  
  +  然后输入这个`@Component`来为`HeroDetailComponent`指定元数据：
   
   +makeExample('reactive-forms/ts/src/app/hero-detail.component.ts', 'metadata','src/app/hero-detail.component.ts (excerpt)')(format=".")
   
  
positive.code:   `FormControl` is a directive that allows you to create and manage 
    a `FormControl` instance directly.
    
  
  +makeExample('reactive-forms/ts/src/app/hero-detail-1.component.ts', 'v1','src/app/hero-detail.component.ts (excerpt)')(format=".")
  
  :marked
    Here you are creating a `FormControl` called `name`. 
    It will be bound in the template to an HTML `input` box for the hero name. 
  
    A `FormControl` constructor accepts three, optional arguments: 
    the initial data value, an array of validators, and an array of async validators.
    
    This simple control doesn't have data or validators.
    In real apps, most form controls have both. 
  
  .l-sub-section
    :marked
      This guide touches only briefly on `Validators`. For an in-depth look at them,
      read the [Form Validation](../cookbook/form-validation.html) cookbook.
  
  .l-main-section
  a#create-template
  :marked
    ## Create the template
  
    Now create the component's template, `src/app/hero-detail.component.html`, with the following markup.
  
  +makeExample('reactive-forms/ts/src/app/hero-detail-1.component.html', 'simple-control','src/app/hero-detail.component.html')(format=".")
  
  
negative.code: :marked
    _Reactive forms_ is an Angular technique for creating forms in a _reactive_ style.
    This guide explains reactive forms as you follow the steps to build a "Hero Detail Editor" form.
    
    *响应式表单*是Angular中用*响应式*风格创建表单的技术。
    本章中，我们会在构建"英雄详情编辑器"的过程中，逐步讲解响应式表单的概念。
  
  a#toc
  :marked
    ## Contents
    
    ## 目录
  
    *[Introduction to reactive forms](#intro)
  
      [响应式表单简介](#intro)
  
    *[Setup](#setup)
  
      [准备工作](#setup)
  
    *[Create a data model](#data-model)
  
      [创建数据模型](#data-model)
  
    *[Create a _reactive forms_ component](#create-component)
  
      [创建*响应式表单*组件](#create-component)
  
    *[Create its template file](#create-template)
  
      [创建模板文件](#create-template)
  
    *[Import the _ReactiveFormsModule_](#import)
  
      [导入`ReactiveFormsModule`](#import)
  
    *[Display the _HeroDetailComponent_](#update)
  
      [显示`HeroDetailComponent`](#update)
  
    *[Add a FormGroup](#formgroup)
  
      [添加FormGroup](#formgroup)
  
    *[Taking a look at the form model](#json)
  
      [表单模型概览](#json)
  
    *[Introduction to _FormBuilder_](#formbuilder)
  
      [`FormBuilder`简介](#formbuilder)
  
    *[Validators.required](#validators)
  
    *[Nested FormGroups](#grouping)
  
      [嵌套的FormGroup](#grouping)
  
    *[Inspect _FormControl_ properties](#properties)
  
      [`FormControl`的属性](#properties)
  
    *[Set form model data using _setValue_ and _patchValue_](#set-data)
  
      [用`setValue`和`patchValue`设置表单的模型数据](#set-data)
  
    *[Use _FormArray_ to present an array of _FormGroups_](#form-array)
  
      [用`FormArray`来表示`FormGroup`的数组](#form-array)
  
    *[Observe control changes](#observe-control)
  
      [观察控件的变化](#observe-control)
  
    *[Save form data](#save)
  
      [保存表单数据](#save)
  
  
    Try the <live-example plnkr="final" title="Reactive Forms (final) in Plunker">Reactive Forms live-example</live-example>.
    
    试试<live-example plnkr="final" title="Reactive Forms (final) in Plunker">响应式表单的在线例子</live-example>。
  
    You can also run the <live-example title="Reactive Forms Demo in Plunker">Reactive Forms Demo</live-example> version
    and choose one of the intermediate steps from the "demo picker" at the top.
    
    你还可以运行<live-example title="Reactive Forms Demo in Plunker">响应式表单的演示程序</live-example>，并从顶部选取一个中间步骤。
  
  a#intro
  :marked
    ## Introduction to Reactive Forms
    
    ## 响应式表单简介
  
    Angular offers two form-building technologies: _reactive_ forms and _template-driven_ forms.
    The two technologies belong to the `@angular/forms` library
    and share a common set of form control classes.
    
    Angular提供了两种构建表单的技术：*响应式*表单和*模板驱动*表单。
    这两项技术都属于`@angular/forms`库，并且共享一组公共的表单控件类。
  
    But they diverge markedly in philosophy, programming style, and technique.
    They even have their own modules: the `ReactiveFormsModule` and the `FormsModule`.
    
    但是它们在设计哲学、编程风格和具体技术上有显著区别。
    所以，它们都有自己的模块：`ReactiveFormsModule` 和 `FormsModule`。
  
    ### _Reactive_ forms
    
    ### *响应式*表单
    
    Angular _reactive_ forms facilitate a _reactive style_ of programming 
    that favors explicit management of the data flowing between
    a non-UI _data model_ (typically retrieved from a server) and a 
    UI-oriented _form model_ that retains the states 
    and values of the HTML controls on screen. Reactive forms offer the ease 
    of using reactive patterns, testing, and validation.
    
    Angular的*响应式*表单能让实现*响应式编程风格*更容易，这种编程风格更喜欢在非UI的*数据模型*（通常接收自服务器）之间显式的管理数据流，
    并且用一个UI导向的*表单模型*来保存屏幕上HTML控件的状态和值。
    响应式表单可以让使用响应式编程模式、测试和校验变得更容易。
  
    With _reactive_ forms, you create a tree of Angular form control objects
    in the component class and bind them to native form control elements in the 
    component template, using techniques described in this guide. 
    
    使用*响应式*表单，我们可以在组件中创建表单控件的对象树，并使用本章中传授的技巧把它们绑定到组件模板中的原生表单控件元素上。
  
    You create and manipulate form control objects directly in the 
    component class. As the component class has immediate access to both the data 
    model and the form control structure, you can push data model values into 
    the form controls and pull user-changed values back out. The component can 
    observe changes in form control state and react to those changes.
    
    我们可以在组件类中直接创建和维护表单控件对象。由于组件类可以同时访问数据模型和表单控件结构，
    因此我们可以把表单模型值的变化推送到表单控件中，并把变化后的值拉取回来。
    组件可以监听表单控件状态的变化，并对此做出响应。
  
    One advantage of working with form control objects directly is that value and validity updates 
    are [always synchronous and under your control](#async-vs-sync "Async vs sync"). 
    You won't encounter the timing issues that sometimes plague a template-driven form
    and reactive forms can be easier to unit test.
    
    直接使用表单控件对象的优点之一是值和有效性状态的更新[总是同步的，并且在你的控制之下](#async-vs-sync "Async vs sync")。
    我们不会遇到时序问题，这个问题有时在模板驱动表单中会成为灾难。而且响应式表单更容易进行单元测试。
  
    In keeping with the reactive paradigm, the component 
    preserves the immutability of the _data model_,
  