Check if input text field is dirty or not in Angular

Question

I am using an text input field in my angular code and I want to check if it is dirty or not:

<input 
      *ngIf="!formated" 
      class="textinput-group__textinput" 
      id="{{name}}" 
      [type]="type" 
      [(ngModel)]="inputModel"
      (ngModelChange)="inputModelChange.emit(inputModel)"
      [maxlength]='maxLength'
      (input)="onValueChange($event)" 
      [ngClass]="{'disabled': isDisabled, 'error': isErrored}"
      [disabled]="isDisabled ? isDisabled : null" 
      (focus)="onFocus()" 
      (blur)="onBlur()"
      [ngStyle]="textStyle">

The $event property passed to the OnValueChange() doesn't contain the dirty property:

onValueChange(event: any): void {
    console.log("event:" + event);
    this.onChange.emit(event.target.value);
  }

How else can I get it?

score 2 · Accepted Answer · answered Dec 03 '20 at 08:13

Using template reference variable we can set ngModel on input element, The we can pass template references to onValueChange method to check whether input is dirty or not.

component.html

 <input 
          *ngIf="!formated" 
          class="textinput-group__textinput" 
          id="{{name}}" 
          [type]="type" 
          [(ngModel)]="inputModel"
          #ref="ngModel"
          (ngModelChange)="inputModelChange.emit(inputModel)"
          [maxlength]='maxLength'
          (input)="onValueChange($event,ref)" 
          [ngClass]="{'disabled': isDisabled, 'error': isErrored}"
          [disabled]="isDisabled ? isDisabled : null" 
          (focus)="onFocus()" 
          (blur)="onBlur()"
          [ngStyle]="textStyle">

component.ts

onValueChange(event: any,ref:NgModel): void {
    console.log("event:" + event);
    this.onChange.emit(ref.dirty);
  }

score 0 · Answer 2 · answered Dec 03 '20 at 07:46

It can be done with reactive form control. ngModel gives you two way binding, not anything else.

HTML

<input *ngIf="!formated" 
       class="textinput-group__textinput" 
       id="{{name}}" 
       [type]="type" 
       [formControl]="control"
       [maxlength]='maxLength'
       [ngClass]="{'disabled': isDisabled, 'error': isErrored}"
       [disabled]="isDisabled ? isDisabled : null" 
       (focus)="onFocus()" 
       (blur)="onBlur()"
       [ngStyle]="textStyle">

TS

    control = new FormControl();


    // where you want to catch the events
    this.control.valuechanges.subscribe(value => {
    // your code
    })

what if I don't want to use reactive form control? – The Inquisitive Coder Dec 03 '20 at 07:48 — The Inquisitive Coder, Dec 03 '20 at 07:48
Try this. https://stackoverflow.com/a/54008278/10927242 – Anup K. Tarafder Dec 06 '20 at 07:02 — Anup K. Tarafder, Dec 06 '20 at 07:02

Check if input text field is dirty or not in Angular

2 Answers2

Linked