anchor.diff:  
   :marked
     Key changes:
  +
  +  关键变化：
  +
     - the validation attributes are gone (except `required`) because we'll be validating in code.
  +
  +  - 验证属性没有了（除了`required`），因为我们将在代码中验证。
   
     - `required` remains, not for validation purposes (we'll cover that in the code), 
     but rather for css styling and accessibility.
   
  +  - 保留了`required`，不是为了验证目的（我们将在代码中再行解释），而是为了CSS样式和可访问性。
  +
   .l-sub-section
     :marked
       A future version of reactive forms will add the `required` HTML validation attribute to the DOM element
  -    (and perhaps the `aria-required` attribute) when the control has the `required` validator function. 
  +    (and perhaps the `aria-required` attribute) when the control has the `required` validator function.
  +
  +    未来版本的响应式表单将会在控制器有`required`验证器函数时，添加`required` HTML验证属性到DOM元素（也可能添加`aria-required`属性）。 
   
       Until then, apply the `required` attribute _and_ add the `Validator.required` function
       to the control model, as we'll do below.
   
  +    在此之前，添加`required`属性**以及**添加`Validator.required`函数到控制器模型，像我们下面这样做：
  +
   :marked
     - the `formControlName` replaces the `name` attribute; it serves the same
     purpose of correlating the input box with the Angular form control.
  +
  +  - `formControlName`替换了`name`属性；它起到了关联输入框和Angular表单控制器的同样作用。
   
     - the two-way `[(ngModel)]` binding is gone. 
     The reactive approach does not use data binding to move data into and out of the form controls.
     We do that in code.
   
  +  - 双向`[(ngModel)]`绑定消失了。
  +  响应式表单方法不使用数据绑定从表单控制器移入和移出数据。我们在代码中做这些。
  +
   .l-sub-section
     :marked
       The retreat from data binding is a principle of the reactive paradigm rather than a technical limitation.
  +
  +    不适用表单数据绑定是响应式模式的原则，而非技术局限。
   :marked
     ### Component class
   
  -  The component class is now responsible for defining and managing the form control model. 
  +  ### 组件类
  +
  +  The component class is now responsible for defining and managing the form control model.
  +
  +  组件类现在负责定义和管理表单控制器模型。 
     
     Angular no longer derives the control model from the template so we can no longer query for it.
     We create the Angular form control model explicitly with the help of the `FormBuilder`.
   
  +  Angular不再从模板衍生控制器模型，所以我们不能再查询它。
  +  我们利用`FormBuilder`来显式创建Angular表单控制器模型。
  +
     Here's the section of code devoted to that process, paired with the template-driven code it replaces:
  +
  +  下面是负责该进程的代码部分，与被它取代的模板驱动代码相比：
   +makeTabs(
     `cb-form-validation/ts/app/reactive/hero-form-reactive.component.ts,
      cb-form-validation/ts/app/template/hero-form-template2.component.ts`,
  
positive.code: :marked
    - we inject the `FormBuilder` in a constructor.
  
    - we call a `buildForm` method in the `ngOnInit` [lifecycle hook method](../guide/lifecycle-hooks.html#hooks-overview)
    because that's when we'll have the hero data. We'll call it again in the `addHero` method.
  .l-sub-section
    :marked
      A real app would retrieve the hero asynchronously from a data service, a task best performed in the `ngOnInit` hook.
  :marked
    - the `buildForm` method uses the `FormBuilder` (`fb`) to declare the form control model.
    Then it attaches the same `onValueChanged` handler (there's a one line difference) 
    to the form's `valueChanged` event and calls it immediately 
    to set error messages for the new control model.
  
  :marked
    #### _FormBuilder_ declaration
    The `FormBuilder` declaration object specifies the three controls of the sample's hero form. 
  
    Each control spec is a control name with an array value. 
    The first array element is the current value of the corresponding hero field.
    The (optional) second value is a validator function or an array of validator functions.
    
    Most of the validator functions are stock validators provided by Angular as static methods of the `Validators` class.
    Angular has stock validators that correspond to the standard HTML validation attributes.
  
    The `forbiddenNames` validator on the `"name"` control is a custom validator, 
    discussed in a separate [section below](#custom-validation).
  
  .l-sub-section  
    :marked
      Learn more about `FormBuilder` in a _forthcoming_ chapter on reactive forms. 
  
  :marked
    #### Committing hero value changes
    
    In two-way data binding, the user's changes flow automatically from the controls back to the data model properties.
    Reactive forms do not use data binding to update data model properties. 
    The developer decides _when and how_ to update the data model from control values.
  
    This sample updates the model twice:
    1. when the user submits the form
    1. when the user chooses to add a new hero
  
    The `onSubmit` method simply replaces the `hero` object with the combined values of the form:
  +makeExample('cb-form-validation/ts/app/reactive/hero-form-reactive.component.ts','on-submit')(format='.')
  .l-sub-section
    :marked
      This example is "lucky" in that the `heroForm.value` properties _just happen_ to
      correspond _exactly_ to the hero data object properties.
  :marked
    The `addHero` method discards pending changes and creates a brand new `hero` model object.
  +makeExample('cb-form-validation/ts/app/reactive/hero-form-reactive.component.ts','add-hero')(format='.')
  :marked
    Then it calls `buildForm` again which replaces the previous `heroForm` control model with a new one.
    The `<form>` tag's `[formGroup]` binding refreshes the page with the new control model.
  
    Here's the complete reactive component file, compared to the two template-driven component files.
  +makeTabs(
    `cb-form-validation/ts/app/reactive/hero-form-reactive.component.ts,
     cb-form-validation/ts/app/template/hero-form-template2.component.ts, 
  
negative.code: :marked
    Then we modify the template HTML elements to match the _reactive forms_ style.
    Here is the "name" portion of the template again, revised for reactive forms and compared with the template-driven version:
  
    接下来，我们修改模板HTML元素，来匹配**响应式表单**样式。
    下面又是“name”部分的模板，响应式表单修改版本和模板驱动版本的比较：
  
  +makeTabs(
    `cb-form-validation/ts/app/reactive/hero-form-reactive.component.html, 
     cb-form-validation/ts/app/template/hero-form-template2.component.html`,
  