As per the HTML:

<input class="form-control m-input ng-pristine ng-valid ng-touched" name="contact" pattern="^((0091)|(\+91)|0?)[789]{1}\d{9}$" placeholder="Enter contact number" required="" type="text">

none of the attibutes caters to the value change within the HTML DOM on sending text to the <input> element.

Deep Dive

The change in the DOM Tree occurs incase the <input> element contains the following attributes and evenets:

• change event: The change event is fired for <input>, <select>, and <textarea> elements when an alteration to the element's value is committed by the user. Unlike the <input> event, the change event is not necessarily fired for each alteration to an element's value. Examples:

  • example#a:

    <input type="text" class="form-control" (input)="onSearchChange($event.target.value)">
    

  • example#b:

    <input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" />
    

  • example#c:

    <input type="text" [ngModel]="mymodel" (keypress)="mymodel=$event.target.value"/>
    

  • example#d:

    <textarea [(ngModel)]="smsMessage" (change)="changeSMSMessage()"></textarea>
    

Note: The HTML specification lists the <input> types that should fire the change event.

Example

As an example, for some elements, including <input type="text">, the change event doesn't fire until the control loses focus. On entering something into the field below, and then click somewhere else to trigger the event.

HTML:

<input placeholder="Enter some text" name="name"/>
<p id="log"></p>

JavaScript:

const input = document.querySelector('input');
const log = document.getElementById('log');

input.addEventListener('change', updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}

References

You can find a couple of relevant detailed discussions in:

• Angular 2 change event on every keypress
• Angular: change value on input event