如何将侦听器添加到 Angular material 中的搜索表单？

Question

我正在使用 Angular material，我有一个搜索表单。如以下代码所示，我有一个按钮，在按钮上发生单击事件后，将搜索表单中写入的单词作为参数提供给 searchProductByName 方法。我想用一个侦听器代替按钮，在表单中写了一些东西并点击了输入（而不是按钮）之后，抓住了搜索表单中写的东西并将它们传递给 searchProductByName方法作为参数。有办法吗？

<form class="search-form" >
    <mat-form-field class="example-full-width" appearance="fill">
      <mat-label >Search</mat-label>
      <input #input type="text" ngModel name="name" class="form-control" id="name"
             aria-label="Search"
             matInput
             >
             <button (click)="searchProductByName(input.value)" routerLink="/products/searchProduct/by_name"  routerLinkActive="active">Go</button>

    </mat-form-field>
  </form>

Answer 1

在模板中执行此操作的简单方法是将 keyup 事件添加到输入中：

<form class="search-form" >
    <input #input type="text" ngModel name="name" class="form-control" id="name"
         (keyup.enter)="searchProductByName(input.value)" 
         aria-label="Search"
         matInput
         >
    <button (click)="searchProductByName(input.value)" routerLink="/products/searchProduct/by_name"  routerLinkActive="active">Go</button>

  </mat-form-field>
</form>

或者您可以使用 ViewChild 在组件中获取您的输入元素并在那里设置监听器。

Answer 2

例如，如果 searchPruductByName 是一种使用 http 请求从后端进行搜索的方法 - 我建议也实施去抖动搜索。否则它会在每次击键时进行搜索。一个很好的优雅方法是使用去抖动装饰器。 https://medium.com/time-machine/how-to-implement-debounce-decorator-2e963b70cd27

<form class="search-form" >
    <input #input type="text" ngModel name="name" class="form-control" id="name"
         (input)="searchProductByName($event); onInput($event)" 
         aria-label="Search"
         matInput>
  </mat-form-field>
</form>

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

要导航至 link，请按“Enter”添加到构造函数 Router，然后使用路由器进行导航。

constructor(router: Router) {}

onNavigate() {
// other stuff
this.router.navigateByUrl('/products/searchProduct/by_name')
}

<input (keyup.enter)="searchProductByName(input.value); onNavigate()">

如何将侦听器添加到 Angular material 中的搜索表单？

How do I add a listener to a search form in Angular material?

html

forms

angular-material

angular