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

Question

I have Angular form (not reactive), with data binded in ngModel:

 <form #form="ngForm">
  <input [(ngModel)]="user.name">
  <input [(ngModel)]="user.color">

  <button type="submit">Save</button>
 </form>

How can i disable submit button if binded data has not been changed?

Answer 1

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