如何在每次插入值時檢測 angular 中輸入字段值的變化？

Question

如何在不按 angular 中的回車按鈕的情況下立即檢測輸入字段值的變化？

我試圖在 Angular 中輸入字段的值更改時觸發 function。最初我使用 Keypress 事件，它正確檢測到輸入字段的插入，但即使我使用退格鍵從值中刪除任何字符，它也沒有觸發 function，這意味着這些更改未被注意到。 我期待它會在每次更改或更新值時觸發該事件。

Answer 1

使用輸入

---

HTML

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

在TS

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

使用 ngModel

---

HTML

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

在TS

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

演示鏈接：- 鏈接

Answer 2

你可以使用 [(ngModel)]。 我建議你“拆分”“bannana sintax”

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

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

另一種方法可以是

<!--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)">

或者

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

Answer 3

通過使用兩個綁定和 ngModelChange 事件，我可以檢測所有更改。 示例代碼：

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