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

Question

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

当我在顶部元素中输入一个值(焦点(并按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>

Answer 1

看看这个问题，我认为你的问题是你的按钮在表单中，因此回车键的默认操作是提交表单。默认情况下，你的按钮是type"提交"；。