CODEWITHSUNDEEP
javascriptsingle-page-applicationaurelia
Manoj Shevate
Manoj Shevate

Reputation: 742

How to track changes in form object in aurelia to activate revert button

We are using Aurelia to crate a single page application where we are creating/Editing Employee details. In Edit employee form, we need to give functionality to revert local changes if any. But the trick is to disable button if there are no local changes

I tried using computedFrom, but its only observing the properties and not the complex object.

Here is a sample code -

import {bindable, computedFrom} from 'aurelia-framework'


export class Employee {
  @bindable employee
  
  @computedFrom('employee')
  enableRevert() {
    return true;
  }
  
  revert() {
   // revert functionality goes here
  }
}

Thanks for your help!

Upvotes: 0

Views: 707

Answers (1)

Jeff G
Jeff G

Reputation: 2175

employee.html

<button disabled.bind="!hasChanged()">Revert</button>

employee.js

attached() {
    Object.assign(this.originalEmployee, employee);
}

hasChanged() {
    // Like @Favio said, iterate over an original copy of the employee object.
    for (let p in employee) {
        if (employee[p] !== this.originalEmployee[p]) {
            return true;
        }
    }

    return false;
}

Upvotes: 3

Related Questions