Question

我有一个表单字段，其中包含一个选择和一个右侧的按钮。想法是用户可以单击“添加”按钮以将选项添加到选择中。问题是，当单击“添加”按钮时，它将同时打开我的对话框和选择选项，而选择选项会覆盖我的对话框。我只想在单击“添加”按钮时打开对话框。如何抑制选择打开？

<form>
  <mat-form-field>
    <mat-placeholder>Search reports</mat-placeholder>
      <mat-select #mySelect>
      <mat-option>Cat</mat-option>
      <mat-option>Dog</mat-option>
      <mat-option>Bird</mat-option>
    </mat-select>
      <button mat-buttons matSuffix mat-stroked-button aria-label="add" (click)="mySelect.close(); alert('open a dialog')">
        <mat-icon>add</mat-icon>
    </button>
  </mat-form-field>
</form>

下面的示例显示，单击按钮可以打开选择，何时不应该选择？

StackBlitz Example

-编辑- @jal_a在评论中提供了答案。解决方案是添加event.stopPropagation（）

<button mat-buttons matSuffix mat-stroked-button aria-label="add" (click)="$event.stopPropagation(); alert('open a dialog')">

Stackblitz - Fixed

Answer 1

如原始帖子和评论中所述，简短的答案是在按钮的单击事件上event.stopPropagation()，以阻止事件冒泡到mat-form-field。

我还想添加mat-form-field上的click事件如何打开mat-select组件。

mat-form-field组件旨在包装mat-select之类的表单域控件，并作为包装器，为用户方便起见，在单击时它会模拟子表单控件上的click事件，包装。

它的工作方式是mat-select实现一个抽象类MatFormFieldControl，它具有方法onContainerClick。 mat-form-field的作用是它引用了其子窗体控件，并且在单击时检查子控件是否实现了onContainerClick方法，如果是，则简单地调用该方法。因此，即使在选择表单控件上未触发click事件的情况下，也要在这种情况下聚焦并打开mat-select。

禁止在同一表单字段中单击按钮时选择打开。

1 个答案: