How to detect input field value changes immediately without pressing enter button in angular ?

I was trying to trigger a function on a value change of input field in Angular. Initially I used Keypress event, that was detecting the insertion the input field correctly, but even I used backspace to remove any character from the value, it didn't trigger that function, which means that these changes went unnoticed. I was expecting that it would trigger that event on the each change or update of the value.

CodePudding user response：

you can use [(ngModel)]. I suggest you "split" the "bannana sintax"

<input matInput placeholder="Word" 
          [ngModel]="search" 
          (ngModelChange)="search=$event;doSomething($event)">

doSomething(value:string)
{
    console.log(value)
}

Another ways can be

<!--see that the event "input" return a "generic event"
    so you use $event.target.value to "reach" the value-->
<input matInput placeholder="Word" 
          [(ngModel)]="search" 
          (input)="doSomething($event.target.value)">

Or

<input matInput placeholder="Word" 
          [(ngModel)]="search" 
          (ngModelChange)="doSomething($event)">

CodePudding user response：

Using Input

---

In HTML

<input (input)="type($event)" type="text" />

In TS

 type(event) {
    console.log(event.target.value);
  }

Using ngModel

---

In HTML

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

In TS

mymodel:any
        
 valuechange(newValue) {
   this.mymodel = newValue;
   console.log(newValue)
 }

Demo Link :- Link

CodePudding user response：

you can use the ngModel directive to bind an input field to a component property, and then use the ngModelChange event to detect changes to the input field's value. Here is an example of how you can do this:

<input [(ngModel)]="value" (ngModelChange)="onValueChange($event)">

export class MyComponent {
  value: string;

  onValueChange(newValue: string) {
    console.log(`Value changed to: ${newValue}`);
  }
}

This way, each time the user inserts a value in the input field, the onValueChange method will be called, and the new value will be passed as an argument. You can then use this value to perform any logic you need.

Alternatively, you can also use valueChanges property of the FormControl object to detect the input value changes. You can use the following snippet to detect the value changes.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <input [formControl]="name">
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = new FormControl('');
  constructor() {
    this.name.valueChanges.subscribe(value => {
      console.log(value);
    });
  }
}

This way, every time the input value changes, the subscription callback will be invoked with the new value.

CodePudding user response：

By using two-binding and ngModelChange event, worked for me to detect all changes. Sample code :

     <input matInput placeholder="Word"
       [(ngModel)]="search"
       (ngModelChange)="filterTbl()"
       matTooltip="Filter Result">