anchor.diff:    'name-with-error-msg', 
     'app/hero-form.component.html (excerpt)')(format=".")
   :marked
  -  When we added the `ngControl` directive, we bound it to the the model's `name` property.
  -  
  -  Here we initialize a template local variable (`name`) with the value "ngForm" (`#name="ngForm"`).
  -  Angular recognizes that syntax and re-sets the `name` local template variable to the
  -  `ngControl` directive instance.
  -  In other words, the `name` local template variable becomes a handle on the `ngControl` object
  -  for this input box.
  +  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', 
  
positive.code:   We slipped in something extra there at the end!  We defined a
    template local variable, **`#heroForm`**, and initialized it with the value, "ngForm".
  
    The variable `heroForm` is now a handle to the `NgForm` directive that we [discussed earlier](#ngForm)
    This time `heroForm` remains a reference to the form as a whole.
  
    Later in the template we bind the button's `disabled` property to the form's over-all validity via
    the `heroForm` variable. Here's that bit of markup:
  +makeExample('forms/ts/app/hero-form.component.html', 'submit-button')
  
negative.code:   ## Track change-state and validity with **ngControl**
  
    A form isn't just about data binding. We'd also like to know the state of the controls on our form.
  
    By setting `ngControl` we create a directive that can tell if the user touched the control,
    if the value changed, or if the value became invalid.
  
    This directive doesn't just track state; it updates the control with special
    Angular CSS classes from the set we listed above.
    We can leverage those class names to change the appearance of the
    control and make messages appear or disappear.
  
    We'll explore those effects soon. Right now
    we should **add `ngControl` to all three form controls**,
    starting with the *Name* input box
  +makeExample('forms/ts/app/hero-form.component.html', 'ngControl-1', 'app/hero-form.component.html (excerpt)')(format=".")
  :marked
    We set this particular `ngControl` to "name" which makes sense for our app. Any unique value will do.
  
  .l-sub-section
    :marked
      Internally Angular creates `Controls` and registers them under their `ngControl` names
      with an `NgForm` directive that Angular attached to the `<form>` tag.
      We'll talk about `NgForm` [later in the chapter](#ngForm).
  
      The `ngControl` *attribute* in our template actually maps to the 
      [NgControlName](../api/common/NgControlName-directive.html) directive.
      There is also a `NgControl` *abstract* directive which is *not the same thing*.
      We often ignore this technical distinction and refer to `NgControlName` more conveniently (albeit incorrectly) as the *NgControl* directive.
      
      While we're under the hood, we might as well note that the `ngModel` in the 
      two-way binding syntax is now a property of the the `NgControlName` directive. 
      The `NgModel` directive is no longer involved. We only need one directive to manage the DOM element
      and there is no practical difference in the way either directive handles data binding.     
  
  .l-main-section
  :marked
    ## Add Custom CSS for Visual Feedback
  
    The *NgControl* directive doesn't just track state. 
    It updates the control with three classes that reflect the state.
    
  table
  