What is the best approach for tracking any change in model in aurelia? - aurelia

Question

I have simple requirement Let's take an example
EX1:
In My View I have two Input fields
First Name and Last Name and one button submit to save first name and Last name.
Now I want that my submit button gets enabled only when there is any change in first name and last name value.
EX2:
In My View I have two Input fields
First Name and Last Name and one button submit to save first name and Last name.
Now here first name and last name having value from my view-model. if i change anything for first name and last name my submit button gets enabled, now again if i put previous value for first name and last name my submit button gets disabled.
<template>
<form role="form" submit.delegate="SaveDetail()" validate.bind="validation">
<div class="form-group">
<label>First Name</label>
<input type="text" value.bind="firstName" class="form-control">
</div>
<button class="btn btn-success" type="submit" disabled.bind="!validation.result.isValid">save</button>
</form>
</template>
import {inject} from 'aurelia-framework';
import {Validation} from 'aurelia-validation';
#inject(Validation)
export class ChildRouter {
firstName: string = 'pranay';
validation;
constructor(Validation) {
var self = this;
self.validation = Validation.on(self)
.ensure('firstName')
.isNotEmpty()
.hasMinLength(3)
.hasMaxLength(10)
.isNotEqualTo(self.firstName);
}
SaveDetail() {
var self = this;
self.validation.validate()
.then(() => {
alert(self.firstName);
});
}
}
Please let me know the best approach for this type of scenario.

Answer 1

Try to track 'dirty' values with validation rule isNotEqualTo(oldValue) and just check if result is valid.
<button disabled.bind="validation.result.isValid"></button>
UPDATE: But when model is refreshed, like after saving, validation object should be re-initialized too. Also for earlier versions it was advised to call this.formValidation.destroy();, not sure if it is needed now.