I have some form and button to save it. The button must only be enabled when there are unsaved changes (inputs) on the form.
<form>
<div>
... (inputs)
<span (click)=save()> Save </span>
</div>
</form>
Is there some build-in mechanism for form dirty check in Angular 5? What is the easiest way to implement this scenario ?
Yes there is: I highly advise you to take a look at the documentation of reactive forms.
Apart from that, the built-in mechanism is only for checking the state of the form:
touched means the user has entered the formdirty / !pristine means the user has made a modificationBut if you want to handle changes made, you should not use that: if your username changes its username from foo, to bar, then back to foo, there is no changes in your form, so the user should not have to send the said form.
Instead, what I advise you is to make a function that compares the form to the original value of your object. Here is how you can do it:
// Creates a reference of your initial value
createReference(obj: any) {
this.reference = Object.assign({}, obj);
}
// Returns true if the user has changed the value in the form
isDifferent(obj: any, prop: string) {
return this.reference[prop] !== obj[prop];
}
submitForm(form: any) {
// ... Business code ...
hasChanges = false;
for (let prop in form) {
if (this.isDifferent(form, prop)) { hasChanges = true; }
}
// If no changes, cancel form submition
if (!hasChanges) { return; }
}
