在 angular material 的输入按键事件中获取值

Question

尝试按照 Angular Material, link to the example 中的示例创建带有清除按钮的输入，我想要的是在按键输入事件中获取输入值。

HTML:

<mat-form-field>
  <input matInput (keydown.enter)="applyFilter($event)" placeholder="Search" 
   name="search" [(ngModel)]="searchValue">
  <button mat-icon-button matSuffix aria-label="Clear" (click)="clearSearch()">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

TS:

  applyFilter(event: any) {
      console.log(JSON.stringify(event)); 
  }

打印事件内容时控制台的结果：

{"isTrusted":true}

Answer 1

我不熟悉Material设计的组件的这种具体场景，但是评论中的建议是传统的做法。
MD 组件可能会因事件而中断，因此您可以尝试手动将值传递给函数。像这样：

<mat-form-field>
  <input matInput #txtVal (keydown.enter)="applyFilter(txtVal.value)" placeholder="Search" 
   name="search" [(ngModel)]="searchValue">
  <button mat-icon-button matSuffix aria-label="Clear" (click)="clearSearch()">
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

TS:

applyFilter(val: string) {
 console.log(val); 
}

#txtVal只是输入域的一个局部变量，所以我们手动将它的值传递给函数。

Answer 2

您只需在 applyFilter() 方法中使用 event.target.value 获取值。

applyFilter(event: any) {
  console.log(event.target.value); 
}

Link 到 StackBlitz Demo.

在 angular material 的输入按键事件中获取值

Get value in enter keypress event in angular material

events

mat

angular-material

angular