带有清除按钮的 Angular Material AutoComplete 被 Enter 清除

Question

将清除按钮（带有清除按钮的部分输入）添加到我的自动完成组件会导致奇怪的行为：点击 Enter 会清除输入，无论它是否被选中。

为了说明我的问题，我从关于自动完成的原始角度材料文档修改了 stackblitz - 添加了清晰的按钮行为。看到这个

我无法弄清楚为什么这个清除按钮在简单输入的情况下可以正常工作，但在自动完成组件的情况下会破坏一切，为什么它被聚焦而不是输入并且正在调用“单击”处理程序。

任何提示将不胜感激。提前致谢！

Answer 1

由于MatFormField是在 a 里面form，所以清除按钮submit默认有type ，变成默认的 button。因此，当您按下Enter表单的输入元素时，单击按钮并提交表单。为了防止这种情况，请type="button"在清除按钮上设置属性：

<button type="button" mat-button ...>

有关演示，请参阅此 stackblitz。