触发单击 Angular 2/4 表单中的表单提交按钮导致边缘浏览器出现问题答案

【问题标题】：Triggering click on form submit button in Angular 2/4 forms causing issues in edge browser触发单击 Angular 2/4 表单中的表单提交按钮导致边缘浏览器出现问题
【发布时间】：2018-11-27 08:40:22
【问题描述】：

我有一个场景，我需要通过代码调用我的表单提交，因为我的提交按钮在视图中隐藏。我有一个使用以下逻辑调用按钮单击（所有表单的一个通用按钮）的逻辑。

const element = 
  this._elementRef.nativeElement.getElementsByClassName('personal-btn');
if (element && element[0]) {
  element[0].click();
}

我的表格：

<json-schema-form [widgets]="customWidgets" 
  [framework]="selectedFrameWork" 
  [form]="jsonFormObject" 
  [options]="jsonFormOptions" 
  (onChanges)="onChanges($event)" (valueChanges)="changeInputValue($event)"
  (onSubmit)="saveInfo($event)" 
  (valueChanges)="changeInputValue($event)">
</json-schema-form>

我的表单提交：

<div class="d-none">
  <input aria-describedby="control52Status" class="personal-btn btn btn- 
    primary float-right" id="control52"
    name="undefined" type="submit" value="undefined">
</div>

我面临的问题是，当我单击下一个按钮（通过代码调用表单提交逻辑）时，表单提交发生并且表单输入值附加到当前 URL 而不是内部逻辑发生和页面刷新。

例子：

[site url]?name=test123

但是，当我删除提交按钮上的 hide 属性并最终单击该提交按钮时，表单会正确提交而无需附加 URL 和页面刷新。

我在 edge 以外的任何浏览器中都没有遇到这个问题。

我的问题就是这样：Stop "?" from being added to URL

但是 preventDefault 或 return false 解决方案都没有帮助我。

【问题讨论】：

标签： angular microsoft-edge angular-forms angular-schema-form

【解决方案1】：

你能不能把next按钮的类型改成button

喜欢;

<button type="button"></button>

【讨论】：

<button role="button" tabindex="0" (click)="submitInformation($event)" type="button" class="btn btn-primary col col-sm-auto"> Submit </button>
如果我没记错这是你的提交按钮，我需要看到“下一步”按钮。此外，“提交”按钮的类型必须是“提交”而不是“按钮”。
这实际上是“下一步”按钮，措辞为“提交”，因为该页面中有多个表单需要提交。
好的，我可以看到你的带有 hide 属性的提交按钮吗？
<div class="d-none"> <input aria-describedby="control52Status" class="personal-btn btn btn- primary float-right" id="control52" name="undefined" type="submit" value="undefined"> </div>

【解决方案2】：

作为一种解决方法，您可以尝试使用“按钮”类型的按钮，然后在按钮点击事件中，您可以使用$http Post 方法提交表单数据。

【讨论】：