javascript - 动态表单提交重新加载页面而不是调用 ngSubmit 函数

Question

我正在尝试从 ts 文件动态提交表单。

形式

<form [formGroup]="mainForm" #mainFormEle (Submit)="doNothing()">
.....
</form>

和 ts

  @ViewChild('mainFormEle',{static:false}) mainFormEle

  doNothing(){
    ..
    console.log('came in')
    ..
  }

  mainFunc(){
    ..
    this.mainFormEle.nativeElement.submit()
    ..
  }

但是上面的块在提交时重新加载页面。并且永远不会进入 doNothing()。还尝试了 (ngSubmit) 和 (onSubmit)

Answer 1

我找到了解决方案。

1. 引入了提交按钮。
2. 而不是从 ts 提交表单，只是触发了按钮上的点击事件。

<button type="submit" #submitButton></button>

或者

<button type="submit" hidden #submitButton></button>

@ViewChild('submitButton',{static:false}) submitButton

  doNothing(){
    ..
    console.log('came in')
    ..
  }

  mainFunc(){
    ..
    this.submitButton.nativeElement.click()
    ..
  }

现在它可以工作了。

Answer 2

您很可能button在该表格中有一个。因为它不会触发提交表单的本机操作。您必须在按钮上显式添加 `type="button"。

例如

<button type="button">
  <!-- rest of the button -->
</button>