动态表单提交重新加载页面，而不是调用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

例如

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

Answer 2

引入了提交按钮。

不是从ts提交表单，而是触发了按钮上的click事件。

<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()
    ..
  }

现在可以正常工作。