Detect if data in an Angular form (not reactive) was changed Detect if data in an Angular form (not reactive) was changed typescript typescript

Detect if data in an Angular form (not reactive) was changed


You can check the dirty flag, which tells you if the form is dirty or not.

<button type="submit" [disabled]="!form.dirty">Save</button>

The form becomes dirty if you change some value in it.

Check here for more details: https://angular.io/guide/forms

enter image description here


According to your comment 'But what if i erase 1 symbol in input and then wright it again (the value is the same, but form was changed)?' I suggest this solution.

The general idea is to store the initial value of the form as separate object (just cloning it). And then create a boolean function which simply iterate through the key-values and compare Updated data with the Initial data. After this just bind the result of this function to your submit button [disabled]="yourCheckMethod(form.value)".


You can try it with the pristine property like this:

<button type="submit" [disabled]="form.pristine">Save</button>

This property checks if your form has changed since it was loaded.