web-dev-qa-db-ja.com

angularマテリアルのkeypressイベントを入力して値を取得する

Angular Material 、 例へのリンク の例に従って、クリアボタンで入力を作成しようとすると、キーを押してEnterイベントで入力値を取得します。

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}
angulareventsangular-materialmat
6
ketimaBU

マテリアルデザインのコンポーネントのこの特定のシナリオに精通していませんが、コメントの提案はそれを行うための従来の方法です。
イベントによって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は入力フィールドの単なるローカル変数なので、その値を手動で関数に渡します。

1
dAxx_

applyFilter()メソッドでevent.target.valueを使用して値を取得するだけです。

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

StackBlitz Demo へのリンク。

1
Faisal