angular - 为什么一个带有自定义指令的元素会触发 Angular 中的另一个元素更改事件？

Question

我在下面有一个包含多个元素的表单。一个元素是带有用于获取 google 位置数据的自定义指令的输入。另一个元素是文件上传元素。

当我在顶部元素中输入一个值（焦点）并按 Enter 键时，它会在 #fileInput 元素中触发“fileChangeEvent()”事件。

我很难理解为什么？

仅供参考 - 我尝试改变

(change)="fileChangeEvent($event)"

至

(click)="fileChangeEvent($event)"

它仍然会被触发

形式 -

<form [formGroup]="editForm">

  // pressing enter, with this element in focus, triggers fileChangeEvent($event) in #fileInput element below
  <input #city appGooglePlaces (onSelect)="setAddress($event)" formControlName="city" class="form-control google-place-input">


  <button (click)="fileInput.click()" class="btn btn-yb w-100">Upload Photo</button>
  <input type="file" #fileInput (change)="fileChangeEvent($event)" />

</form>

标签： angularangular-directiveangular-formsangular-event-emitter

Answer 1

看看这个问题，我认为您的问题是您的按钮在表单中，因此输入键的默认操作是提交表单。默认情况下，您的按钮类型为“提交”。