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

Question

我有一个带有提交按钮的简单表单。当我点击按钮时，有一个很好的涟漪效果。当用户使用回车键提交表单时，我希望出现相同的连锁反应。我找不到如何操作。

使用 angular 6 和最新的 material 版本

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>

使用 ngSubmit 而不是 keydown.enter 也可以：

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

STACKBLITZ

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

Trigger ripple effect on form submit by enter key

angular-material

angular-material2

angular