title: How can I detect/watch "dirty-status" of an angular2-form in the right way?
body: <p>I have a form in Angular2 (e.g)</p>
  
  <pre><code>&lt;form id="myLovelyForm" name="myLovelyForm" #myLovelyForm="ngForm"&gt;
      &lt;label [attr.for]="myLovelyCheckbox"&gt;
        &lt;input [attr.id]="myLovelyCheckbox" type="checkbox"
               [(ngModel)]="myLovelyCheckbox"&gt;
        &lt;span class="myLovelyCheckbox"&gt;myLovelyCheckbox&lt;/span&gt;
      &lt;/label&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and an animation, which should start, if the form is dirty:</p>
  
  <pre><code>&lt;div 
      id="myLovelyNotification" 
      class="myLovelyNotification" 
      [@notification]="myLovelyForm.form.dirty"&gt;
  .....
  .....
  &lt;/div&gt;
  </code></pre>
  
  <p>The animation works properly if I set [@notification] = true, but my <code>myLovelyForm.dirty</code> does not fire, if I touch the form and change an element.</p>
  
  <p>If the @notification is false, the animation stops, i.e. if the checkbox was selected before and I unselect it mistakenly and select it again, the form is not pristine (touched) but not dirty anymore, therefore the animation should stop. If I set the @notification = false manually, it works properly.</p>
  
  <p>The big question is: How can I detect/watch "dirty-status" of an angular2-form in the right way?</p>