为什么一个带有自定义指令的元素在 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,我认为你的问题是你的按钮在表单中,因此回车键的默认操作是提交表单。默认情况下,您的按钮类型为“提交”。