Question

我有一个带有提交按钮的简单表单。当我单击按钮时，会有很好的波纹效果。我希望当用户使用Enter键提交表单时出现相同的波纹效果。我找不到方法。

在最新材料版本中使用angular 6

Answer 1

尝试向表单添加keydown.enter事件监听器，这将触发button的波动：

<form (keydown.enter)="btn.ripple.launch({centered:true})">
  <input>
  <button #btn mat-button>Click me!</button>
</form>

请注意，我在垫按钮上添加了btn模板引用。

如果要触发ts文件的波动，请执行以下操作：

import {Component, ViewChild} from '@angular/core';
import {MatButton} from '@angular/material';
  .
  .
  .
@ViewChild('btn') btn: MatButton;
  .
  .
  .
ripple() {
  this.btn.ripple.launch({
    centered: true
  });
}

，您的HTML应该如下所示：

<form (keydown.enter)="ripple()">
  <input>
  <button #btn mat-button>Click me!</button>
</form>

STACKBLITZ

通过回车键触发表单提交的涟漪效应

1 个答案: