通过输入键触发表单提交的涟漪效应答案

【问题标题】：Trigger ripple effect on form submit by enter key通过输入键触发表单提交的涟漪效应
【发布时间】：2018-07-24 19:56:13
【问题描述】：

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

使用最新材质版本的 Angular 6

【问题讨论】：

标签： angular angular-material angular-material2

【解决方案1】：

尝试在表单中添加keydown.enter 事件监听器，这将触发button 的涟漪：

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

请注意，我在 mat 按钮中添加了 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

【讨论】：