anchor.diff:    `FormControl` is a directive that allows you to create and manage 
     a `FormControl` instance directly.
     
  +  
  +  接下来，创建并导出一个带`FormControl`的`HeroDetailComponent`类。
  +  `FormControl`是一个指令，它允许我们直接创建并管理一个`FormControl`实例。
  +  
   
   +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. 
  +  
  +  这里我们创建了一个名叫`name`的`FormControl`。
  +  它将会绑定到模板中的一个`input`框，表示英雄的名字。
   
     A `FormControl` constructor accepts three, optional arguments: 
     the initial data value, an array of validators, and an array of async validators.
     
  +  `FormControl`构造函数接收三个可选参数：
  +  初始值、验证器数组和异步验证器数组。
  +  
     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.
  +    
  +    本章中只会接触`Validators`中的一点点，要想更深入的了解它们，请阅读烹饪宝典中的[表单验证](../cookbook/form-validation.html)一章。
   
   .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.
  +  
  +  现在，在创建组件的模板文件`src/app/hero-detail.component.html`，内容如下：
   
   +makeExample('reactive-forms/ts/src/app/hero-detail-1.component.html', 'simple-control','src/app/hero-detail.component.html')(format=".")
   
  
positive.code: .l-main-section
  :marked
    ## Display the _HeroDetailComponent_
    Revise the `AppComponent` template so it displays the `HeroDetailComponent`.
  +makeExample('reactive-forms/ts/src/app/app.component.1.ts', '','src/app/app.component.ts')(format=".")
  
  a#essentials
  :marked
    ### Essential form classes
    It may be helpful to read a brief description of the core form classes.
    
    * [_AbstractControl_](../api/forms/index/AbstractControl-class.html "API Reference: AbstractControl")
    is the abstract base class for the three concrete form control classes: 
    `FormControl`, `FormGroup`, and `FormArray`.
    It provides their common behaviors and properties, some of which are _observable_.
  
    * [_FormControl_](../api/forms/index/FormControl-class.html "API Reference: FormControl") 
    tracks the value and validity status of an _individual_ form control.
    It corresponds to an HTML form control such as an input box or selector.
  
    * [_FormGroup_](../api/forms/index/FormGroup-class.html "API Reference: FormGroup")
    tracks the value and validity state of a _group_ of `AbstractControl` instances.
    The group's properties include its child controls.
    The top-level form in your component is a `FormGroup`.
  
    * [_FormArray_](../api/forms/index/FormArray-class.html "API Reference: FormArray")
    tracks the value and validity state of a numerically indexed _array_ of `AbstractControl` instances.
  
    You'll learn more about these classes as you work through this guide.
  
  
  :marked
    ### Style the app
    You used bootstrap CSS classes in the template HTML of both the `AppComponent` and the `HeroDetailComponent`.
    Add the `bootstrap` _CSS stylesheet_ to the head of `index.html`:
  
  +makeExample('reactive-forms/ts/src/index.html', 'bootstrap','index.html')(format=".")
  
  :marked
    Now that everything is wired up, the browser should display something like this: 
  
  figure.image-display
    img(src="/resources/images/devguide/reactive-forms/just-formcontrol.png" width="400px" alt="Single FormControl")
  
negative.code: a#formgroup
  :marked
    ## Add a FormGroup
    
    ## 添加FormGroup
    
    Usually, if you have multiple *FormControls*, you'll want to register 
    them within a parent `FormGroup`.
    This is simple to do. To add a `FormGroup`, add it to the imports section 
    of `hero-detail.component.ts`:
    
    通常，如果有多个*FormControl*，我们会希望把它们注册进一个父`FormGroup`中。这很容易。只要把它加入`hero-detail.component.ts`的`import`区就可以了。
  
  +makeExample('reactive-forms/ts/src/app/hero-detail-2.component.ts', 'imports','src/app/hero-detail.component.ts')(format=".")
  
  :marked
    In the class, wrap the `FormControl` in a `FormGroup` called `heroForm` as follows:
    
    在这个类中，把`FormControl`包裹进了一个名叫`heroForm`的`FormGroup`中，代码如下：
  
  +makeExample('reactive-forms/ts/src/app/hero-detail-2.component.ts', 'v2','src/app/hero-detail.component.ts')(format=".")
  
  :marked
    Now that you've made changes in the class, they need to be reflected in the 
    template. Update `hero-detail.component.html` by replacing it with the following.
    
    现在我们改完了这个类，该把它映射到模板中了。把`hero-detail.component.html`改成这样：
  
  +makeExample('reactive-forms/ts/src/app/hero-detail-2.component.html', 'basic-form','src/app/hero-detail.component.html')(format=".")
  
  