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

Question

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?

Answer 1

Simply -

@ViewChild('f') templateForm: any;


ngOnInit() {
    this.templateForm.valueChanges.subscribe((value: any) => {
        if (this.templateForm.dirty) {
            console.log('template form dirty - yes: ', value);
        } else {
            console.log('template form dirty - no: ');
        }
    });
}

Where your template contains:

 <form  #f="ngForm" (ngSubmit)="save(f)>
    ...
 </form>

However this is still using template forms which are really there to help bridge the gap with Angular1 apps. Model Driven forms are the Angular 2 way of doing it for anything but real basic applications. See for example:

• https://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html
• http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/
• And use custom components to really extend and excell your app - https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

Answer 2

You can subscribe to form changes:

this.physicalForm.valueChanges
   .map((value) => {
      return value;
   })
   .subscribe((value) => {
      if(this.selectedPhysical.weight != this.physicalForm.value.weight)  {      
        this.selectedPhysical.weight = this.physicalForm.value.weight;
      }
      this.isDirty == this.physicalForm.touched;
   });

If this event fires, then you know your form is dirty.

this is an example from my actual app (nut.abbr is the formcontrolName):

ngOnInit() {
   for (let nut of this.userSettings.nutrientData) {
      this.foodSettingsForm.controls[nut.abbr].valueChanges
         .subscribe(v => { console.log("value: ", v); this.completeValueChange(nut.abbr, v); });
   }
}

completeValueChange(field: string, value: boolean) {
   this.isChanged = true;
   Nutrient.updateNutrient(field, value, this.userSettings.nutrientData);
}