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

Why is one element with custom directive triggering another elements change event in Angular?

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

当我在顶部元素中输入一个值(在焦点中)并按回车键时,它会触发 #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>

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