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

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 示例

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

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

Stackblitz - 已修复

Answer 1

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

我还想添加单击事件如何mat-form-field打开mat-select组件。

mat-form-field组件被设计为包装表单字段控件，例如mat-select和 作为包装器，为了方便用户，当单击时，它会模拟它所包装的子表单控件上的单击事件。

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