anchor.diff:    - 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.
  +  - The `heroForm` object changes several times during the life of the component, most notably when you add a new hero.
  +  Periodically inspecting it reveals these changes.
   
     - 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.  
  +  - When there _is_ a new `heroForm` model, `formChanged()` subscribes to its `valueChanges` _Observable_ property.
  +  The `onValueChanged` handler looks for validation errors after every keystroke.  
   +makeExample('cb-form-validation/ts/src/app/template/hero-form-template2.component.ts','handler','template/hero-form-template2.component.ts (handler)')(format='.')
   
   :marked
  
positive.code: 
  a#top
  :marked
    We can improve overall data quality by validating user input for accuracy and completeness.
  
    In this cookbook we show how to validate user input in the UI and display useful validation messages 
    using first the template-driven forms and then the reactive forms approach.
  .l-sub-section
    :marked
      Learn more about these choices in the [Forms chapter.](../guide/forms.html)
  
  a#toc
  :marked
    ## Table of Contents
  
      [Simple Template-Driven Forms](#template1)
  
      [Template-Driven Forms with validation messages in code](#template2)
  
      [Reactive Forms with validation in code](#reactive)
  
      [Custom validation](#custom-validation)
  
      [Testing](#testing)
  
  a#live-example
  :marked
    **Try the live example to see and download the full cookbook source code**
  live-example(name="cb-form-validation" embedded img="cookbooks/form-validation/plunker.png")
  
  .l-main-section
  a#template1
  :marked
     ## Simple Template-Driven Forms
  
     In the template-driven approach, you arrange 
     [form elements](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML) in the component's template.
  
     You add Angular form directives (mostly directives beginning `ng...`) to help
     Angular construct a corresponding internal control model that implements form functionality.
     We say that the control model is _implicit_ in the template.
  
     To validate user input, you add [HTML validation attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) 
     to the elements. Angular interprets those as well, adding validator functions to the control model.
  
negative.code:   Such tests have minimal setup, are quick to write, and easy to maintain.
    They do not require the `Angular TestBed` or asynchronous testing practices.
  
    That's not possible with _template-driven_ forms.
    The template-driven approach relies on Angular to produce the control model and 
    to derive validation rules from the HTML validation attributes.
    You must use the `Angular TestBed` to create component test instances,
    write asynchronous tests, and interact with the DOM.
  
    While not difficult, this takes more time, work and 
    skill&mdash;factors that tend to diminish test code 
    coverage and quality.
  