Does Aurelia provide any Dirty indicator based on the historical cost of the property

Question

I have an edit form, and I want the Save button to be disabled until editing for one of the properties associated with an input or selection item is done.

However, if the user edits the text to its original value, the form should no longer be considered dirty.

Example:

• Initial value: "Test" - Not Dirty
• The user edits the input and changes the value to: "Test 2" - Dirty
• The user edits the input again and changes the value to "Test" - Not Dirty

I saw this post that describes how to create a dirtyBindingBehavior, but it only compares the new value with what it was there before - in this case line 3 above will cause the form to still display as "Dirty" because it will compare the old value of Test 2 with the new value of Test.

Any ideas on how to do this?

Answer 1

You just need to make a copy of the object and create a getter property that compares the old object with the new object (use @computedFromto avoid dirty checking). For instance:

import {computedFrom} from 'aurelia-framework';

export class App {

  oldModel = new Model();
  newModel = deepClone(this.oldModel);

  @computedFrom('newModel.name', 'newModel.surname')
  get hasChanged() {
    return !isEqual(this.oldModel, this.newModel);
  }

}

function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));;
  //use Object.assign({}, obj) if you don't need a deep clone
}

function isEqual(obj1, obj2) {
  return JSON.stringify(obj1) === JSON.stringify(obj2);
}

class Model {
  //something from database;
  name = 'John';
  surname = 'Doe';
}

Execution example https://gist.run/?id=d9f7ee41f4448d7981351c7e222d7388