anchor.diff:    :marked
       Learn more about `FormBuilder` in the [Introduction to FormBuilder](../guide/reactive-forms.html#formbuilder) section of Reactive Forms guide. 
   
  +a#committing-changes
   :marked
     #### Committing hero value changes
     
  
positive.code: 
    This approach requires a bit more effort. *You have to write the control model and manage it*.
  
    In return, you can
    * add, change, and remove validation functions on the fly
    * manipulate the control model dynamically from within the component
    * [test](#testing) validation and control logic with isolated unit tests.
  
    The third cookbook sample re-writes the hero form in _reactive forms_ style.
  
    ### 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:
  +makeExample('cb-form-validation/ts/src/app/reactive/hero-form-reactive.module.ts','','src/app/reactive/hero-form-reactive.module.ts')(format='.')
  :marked
    The "Reactive Forms" feature module and component are in the `src/app/reactive` folder. 
    Let's focus on the `HeroFormReactiveComponent` there, starting with its template.
  
    ### Component template
  
    We begin by changing the `<form>` tag so that it binds the Angular `formGroup` directive in the template
    to the `heroForm` property in the component class. 
    The `heroForm` is the control model that the component class builds and maintains.
  
  +makeExample('cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.html','form-tag')(format='.')
  :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:
  +makeTabs(
    `cb-form-validation/ts/src/app/reactive/hero-form-reactive.component.html, 
  
negative.code: .l-main-section
  a#template2
  :marked
    ## Template-driven forms with validation messages in code
  
    While the layout is straightforward, 
    there are obvious shortcomings with the way it's handling validation messages:
  
    * It takes a lot of HTML to represent all possible error conditions. 
    This gets out of hand when there are many controls and many validation rules.
    
    * There's a lot of JavaScript logic in the HTML.
  
    * The messages are static strings, hard-coded into the template. 
    It's easier to maintain _dynamic_ messages in the component class.
  
    In this example, you can move the logic and the messages into the component with a few changes to 
    the template and component.
    
    Here's the hero name again, excerpted from the revised template 
    (Template 2), next to the original version:
  +makeTabs(
    `cb-form-validation/ts/src/app/template/hero-form-template2.component.html, 
     cb-form-validation/ts/src/app/template/hero-form-template1.component.html`,
  