Search code examples
angulartypescriptangular-forms

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


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?


Solution

  • 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