anchor.diff:    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:
  +  1. When the user submits the form.
  +  1. When the user adds a new hero.
  +
  +  The `onSubmit()` method simply replaces the `hero` object with the combined values of the form:
   +makeExample('cb-form-validation/ts/src/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
  +    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.
  +  The `addHero()` method discards pending changes and creates a brand new `hero` model object.
   +makeExample('cb-form-validation/ts/src/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.
  +  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.
  
positive.code:   - Angular `@ViewChild` queries for a template variable when you pass it 
    the name of that variable as a string (`'heroForm'` in this case).
  
    - The `heroForm` object changes several times during the life of the component, most notably when we add a new hero.
    We'll have to re-inspect it periodically.
  
    - Angular calls the `ngAfterViewChecked` [lifecycle hook method](../guide/lifecycle-hooks.html#afterview) 
    when anything changes in the view.
    That's the right time to see if there's a new `heroForm` object.
    
    - When there _is_ a new `heroForm` model, we subscribe to its `valueChanged` _Observable_ property.
    The `onValueChanged` handler looks for validation errors after every user keystroke.  
  +makeExample('cb-form-validation/ts/src/app/template/hero-form-template2.component.ts','handler','template/hero-form-template2.component.ts (handler)')(format='.')
  
  :marked
  
negative.code:     (and perhaps the `aria-required` attribute) when the control has the `required` validator function. 
  
      Until then, apply the `required` attribute _and_ add the `Validator.required` function
      to the control model, as you'll see below.
  
  :marked
    - The `formControlName` replaces the `name` attribute; it serves the same
    purpose of correlating the input with the Angular form control.
  
    - 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.
    That's all in code.
  
  .l-sub-section
    :marked
      The retreat from data binding is a principle of the reactive paradigm rather than a technical limitation.
  a#reactive-component-class
  :marked
    ### Component class
  
    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 you can no longer query for it.
    You can create the Angular form control model explicitly with 
    the help of the `FormBuilder` class.
  
    Here's the section of code devoted to that process, paired with the template-driven code it replaces:
  +makeTabs(
  