How can I detect/watch "dirty-status" of an angular2-form in the right way?

I have a form in Angular2 (e.g)

<form id="myLovelyForm" name="myLovelyForm" #myLovelyForm="ngForm">
<label [attr.for]="myLovelyCheckbox">
<input [attr.id]="myLovelyCheckbox" type="checkbox"
[(ngModel)]="myLovelyCheckbox">
<span class="myLovelyCheckbox">myLovelyCheckbox</span>
</label>
</form>


and an animation, which should start, if the form is dirty:

<div
id="myLovelyNotification"
class="myLovelyNotification"
[@notification]="myLovelyForm.form.dirty">
.....
.....
</div>


The animation works properly if I set [@notification] = true, but my myLovelyForm.dirty does not fire, if I touch the form and change an element.

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.

The big question is: How can I detect/watch "dirty-status" of an angular2-form in the right way?

Continue reading...