按enter键触发表单提交的连锁反应
按enter键触发表单提交的连锁反应
提问于 2018-07-25 03:56:13
我有一个简单的表单与提交按钮。当我点击按钮时，会有一种很好的连锁反应。当用户使用Enter键提交表单时，我希望出现相同的连锁反应。我不知道该怎么做。
使用具有最新材料版本的angular 6
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-25 05:00:26
尝试在表单中添加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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51506589
复制相关文章
相似问题
腾讯云开发者
