Angular Material:怪异的后缀功能

Question

所以我偶然发现了一个奇怪的…我使用角材料的表单字段组件来创建我的表单…我注意到，如果我在mat输入字段内使用一个按钮作为matSuffix，如果我尝试从另一个字段提交表单(例如按enter键)…该字段成为焦点，按钮(后缀)被点击…

即使把angular材料的例子包装成一个形式，我也会得到相同的结果:https://stackblitz.com/edit/angular-frc7tj?file=app/form-field-prefix-suffix-example.html

<div class="example-container">
<form>
<mat-form-field>
<input
matInput
placeholder="Enter your password"
[type]="hide ? 'password' : 'text'"
/>
<button
mat-icon-button
matSuffix
(click)="hide = !hide"
[attr.aria-label]="'Hide password'"
[attr.aria-pressed]="hide"
>
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
</mat-form-field>
<mat-form-field>
<input
matInput
placeholder="Amount"
type="number"
class="example-right-align"
/>
<span matPrefix>$&nbsp;</span>
<span matSuffix>.00</span>
</mat-form-field>
</form>
</div>

先一些输入(密码字段),然后点击"amount"字段并按enter，观察发生了什么

第一个获得焦点并单击按钮后缀....

我怎样才能防止这种行为实际上执行正常,预计一个回车键(表单提交)?

Answer 1

将type="button"添加到表单中的按钮中。默认情况下，type="submit"正在使用，您正在尝试通过按Enter键提交表单。看到StackBlitz。