anchor.diff:    1. Create the `Hero` model class
     1. Create the component that controls the form
     1. Create a template with the initial form layout
  -  1. Add the **ngModel** directive to each form input control
  +  1. Bind data properties to each form input control with the `ngModel` two-way data binding syntax
     1. Add the **ngControl** directive to each form input control
     1. Add custom CSS to provide visual feedback
     1. Show and hide validation error messages
  
positive.code: 
    We will build a simple form from scratch, one step at a time. Along the way we'll learn
  
    - How to build an Angular form with a component and template
  
    - The `ngModel` two-way data binding syntax for reading and writing values to input controls
  
    - The `ngControl` directive to track the change state and validity of form controls
  
    - The special CSS classes that `ngControl` adds to form controls and how we can use them to provide strong visual feedback
  
    - How to display validation errors to users and enable/disable form controls
  
    - How to share information across controls with template local variables
    
    [Live Example](/resources/live-examples/forms/ts/plnkr.html)
  .l-main-section
  
negative.code:   'name-with-error-msg', 
    'app/hero-form.component.html (excerpt)')(format=".")
  :marked
    We need a template local variable to access the input box's Angular control from within the template.
    Here we created a variable called `name` and gave it the value "ngForm".
  .l-sub-section
    :marked
      Why "ngForm"? 
      A directive's [exportAs](/docs/ts/latest/api/core/DirectiveMetadata-class.html#!#exportAs) property 
      tells Angular how to link local variable to the directive.
      We set `name` to `ngForm` because the `NgControlName` directive's `exportAs` property happens to be "ngForm".
      
      This seems unintuitive at first until we realize that *all* control directives in the 
      Angular form family &mdash including `NgForm`, `NgModel`, `NgControlName` and `NgControlGroup` &mdash; *exportAs* "ngForm"
      and we only ever apply *one* of these directives to an element tag.
      Consistency rules!
  
    Now we can control visibility of the "name" error message by binding properties of the `name` control to the message `<div>` element's `hidden` property.
  +makeExample('forms/ts/app/hero-form.component.html', 
  